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='categoryIds'
          value={formik.values.categoryIds[0] || ''}
          onChange={(e) => {
            const value = e.target.value
            formik.setFieldValue('categoryIds', value ? [value] : [])
          }}
          error_text={formik.touched.categoryIds && formik.errors.categoryIds ? String(formik.errors.categoryIds) : ''}
        />
      </div>

      <div className='grid grid-cols-3 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='points'
          label='امتیاز'
          placeholder=''
          type='number'
          value={formik.values.points}
          onChange={(e) => formik.setFieldValue('points', Number(e.target.value))}
          error_text={formik.touched.points && formik.errors.points ? formik.errors.points : ''}
        />
      </div>

      <div className='grid grid-cols-3 gap-4 mt-5'>
        <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='stock'
          label='موجودی'
          placeholder=''
          type='number'
          value={formik.values.stock}
          onChange={(e) => formik.setFieldValue('stock', Number(e.target.value))}
          error_text={formik.touched.stock && formik.errors.stock ? formik.errors.stock : ''}
        />

        <Input
          name='stockDefault'
          label='موجودی پیش‌فرض'
          placeholder=''
          type='number'
          value={formik.values.stockDefault}
          onChange={(e) => formik.setFieldValue('stockDefault', Number(e.target.value))}
          error_text={formik.touched.stockDefault && formik.errors.stockDefault ? formik.errors.stockDefault : ''}
        />
      </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>
    </>
  )
}

export default BasicInfoSection

