import { type FC } from 'react'
import type { FormikProps } from 'formik'
import Input from '@/components/Input'
import Select from '@/components/Select'
import Textarea from '@/components/Textarea'
import type { CreateFoodType } from '../types/Types'

type BasicInfoSectionProps = {
  formik: FormikProps<CreateFoodType>
  categories: Array<{ label: string; value: string }>
}

const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) => {
  return (
    <>
      <Input
        label='نام غذا'
        name='title'
        placeholder=''
        value={formik.values.title}
        onChange={formik.handleChange}
        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
      />

      <div className='mt-5'>
        <Select
          items={categories}
          label='دسته بندی'
          placeholder='انتخاب کنید'
          name='categoryId'
          value={formik.values.categoryId}
          onChange={(e) => {
            const value = e.target.value
            formik.setFieldValue('categoryId', value)
          }}
          error_text={formik.touched.categoryId && formik.errors.categoryId ? String(formik.errors.categoryId) : ''}
        />
      </div>

      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
        <Input
          name='price'
          label='قیمت'
          placeholder='تومان'
          type='number'
          seprator={true}
          value={formik.values.price}
          onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
          error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
        />

        <Input
          name='discount'
          label='تخفیف'
          placeholder='تومان'
          type='number'
          seprator={true}
          value={formik.values.discount}
          onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
          error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
        />

        <Input
          name='prepareTime'
          label='زمان آماده سازی'
          placeholder='دقیقه'
          type='number'
          value={formik.values.prepareTime}
          onChange={(e) => formik.setFieldValue('prepareTime', Number(e.target.value))}
          error_text={formik.touched.prepareTime && formik.errors.prepareTime ? formik.errors.prepareTime : ''}
        />

        <Input
          name='dailyStock'
          label='موجودی روزانه'
          placeholder='عدد'
          type='number'
          seprator={true}
          value={formik.values.dailyStock}
          onChange={(e) => formik.setFieldValue('dailyStock', Number(e.target.value))}
          error_text={formik.touched.dailyStock && formik.errors.dailyStock ? formik.errors.dailyStock : ''}
        />
      </div>

      <div className='mt-5'>
        <Textarea
          name='desc'
          label='توضیحات غذا'
          placeholder=''
          value={formik.values.desc}
          onChange={formik.handleChange}
          error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
        />
      </div>

      <div className='mt-5'>
        <Input
          name='order'
          label='اولویت'
          placeholder='عدد'
          type='number'
          value={formik.values.order}
          onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
          error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
        />
      </div>
    </>
  )
}

export default BasicInfoSection

