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

type WeekDaysSectionProps = {
  formik: FormikProps<CreateProductType>
}

const WeekDaysSection: FC<WeekDaysSectionProps> = ({ formik }) => {
  const weekDays = [
    { value: 0, label: 'شنبه' },
    { value: 1, label: 'یکشنبه' },
    { value: 2, label: 'دوشنبه' },
    { value: 3, label: 'سه‌شنبه' },
    { value: 4, label: 'چهارشنبه' },
    { value: 5, label: 'پنج‌شنبه' },
    { value: 6, label: 'جمعه' }
  ] as const

  const handleDayChange = (dayValue: number, checked: boolean) => {
    const currentDays = formik.values.weekDays || []
    if (checked) {
      if (!currentDays.includes(dayValue)) {
        formik.setFieldValue('weekDays', [...currentDays, dayValue])
      }
    } else {
      formik.setFieldValue('weekDays', currentDays.filter(d => d !== dayValue))
    }
  }

  return (
    <div className='mt-6'>
      <div className='text-sm mb-3'>روزهای هفته</div>
      <div className='flex gap-4 sm:gap-6 flex-wrap'>
        {weekDays.map((day) => (
          <div key={day.value} className='flex items-center gap-2'>
            <Checkbox
              checked={(formik.values.weekDays || []).includes(day.value)}
              onCheckedChange={(checked) => handleDayChange(day.value, checked as boolean)}
            />
            <label className='text-xs cursor-pointer'>{day.label}</label>
          </div>
        ))}
      </div>
    </div>
  )
}

export default WeekDaysSection