import { type FC } from 'react'
import type { FormikProps } from 'formik'
import { Checkbox } from '@/components/ui/checkbox'
import type { CreateFoodType } from '../types/Types'

type MealTimesSectionProps = {
  formik: FormikProps<CreateFoodType>
}

const MealTimesSection: FC<MealTimesSectionProps> = ({ formik }) => {
  const mealTypes = [
    { value: 'breakfast', label: 'صبحانه' },
    { value: 'lunch', label: 'ناهار' },
    { value: 'dinner', label: 'شام' }
  ] as const

  const handleMealTypeChange = (mealType: string, checked: boolean) => {
    const currentMealTypes = formik.values.mealTypes || []
    if (checked) {
      if (!currentMealTypes.includes(mealType)) {
        formik.setFieldValue('mealTypes', [...currentMealTypes, mealType])
      }
    } else {
      formik.setFieldValue('mealTypes', currentMealTypes.filter(m => m !== mealType))
    }
  }

  return (
    <div className='mt-6'>
      <div className='text-sm mb-3'>وعده‌های غذایی</div>
      <div className='flex gap-6 flex-wrap'>
        {mealTypes.map((mealType) => (
          <div key={mealType.value} className='flex items-center gap-2'>
            <Checkbox
              checked={(formik.values.mealTypes || []).includes(mealType.value)}
              onCheckedChange={(checked) => handleMealTypeChange(mealType.value, checked as boolean)}
            />
            <label className='text-xs cursor-pointer'>{mealType.label}</label>
          </div>
        ))}
      </div>
    </div>
  )
}

export default MealTimesSection