import { mdiChartTimelineVariant } from '@mdi/js'
import Head from 'next/head'
import { useRouter } from 'next/router'
import React, { ReactElement } from 'react'
import { Form, Formik } from 'formik'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
import ProductSkuFormContent from '../../components/Products/ProductSkuFormContent'
import { getPageTitle } from '../../config'
import { create } from '../../stores/products/productsSlice'
import { useAppDispatch } from '../../stores/hooks'

const initialValues = {
  sku: '',
  product_name: '',
  brand: '',
  category: '',
  short_description: '',
  long_description: '',
  images: [],
  spec_sheet: [],
  pack_size: '',
  units_per_case: '',
  unit_weight_lbs: '',
  case_weight_lbs: '',
  uom: '',
  moq_cases: '',
  temperature_zone: 'ambient',
  product_status: 'active',
  allergens: '',
  certifications: '',
  is_sample_eligible: false,
}

const ProductsNew = () => {
  const router = useRouter()
  const dispatch = useAppDispatch()

  const handleSubmit = async (data) => {
    await dispatch(create(data))
    await router.push('/products/products-list')
  }

  return (
    <>
      <Head>
        <title>{getPageTitle('New contract SKU')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton
          icon={mdiChartTimelineVariant}
          title='New contract SKU'
          main
        >
          {''}
        </SectionTitleLineWithButton>

        <Formik initialValues={initialValues} onSubmit={(values) => handleSubmit(values)}>
          <Form>
            <ProductSkuFormContent mode='create' categoryValue={[]} />
          </Form>
        </Formik>
      </SectionMain>
    </>
  )
}

ProductsNew.getLayout = function getLayout(page: ReactElement) {
  return (
    <LayoutAuthenticated permission='CREATE_PRODUCTS'>
      {page}
    </LayoutAuthenticated>
  )
}

export default ProductsNew
