import { type FC } from 'react';
import type { FormikProps } from 'formik';
import Select from '@/components/Select';
import TimePicker from '@/components/TimePicker';
import Switch from '@/components/Switch';
import type { CreateScheduleType } from '../types/Types';

type ScheduleFormFieldsProps = {
  formik: FormikProps<CreateScheduleType>;
};

const weekDayOptions = [
  { value: '0', label: 'شنبه' },
  { value: '1', label: 'یکشنبه' },
  { value: '2', label: 'دوشنبه' },
  { value: '3', label: 'سه‌شنبه' },
  { value: '4', label: 'چهارشنبه' },
  { value: '5', label: 'پنج‌شنبه' },
  { value: '6', label: 'جمعه' },
];

const ScheduleFormFields: FC<ScheduleFormFieldsProps> = ({ formik }) => {
  return (
    <div className='bg-white py-8 xl:px-10 px-4 rounded-3xl space-y-5'>
      <Select
        label='روز هفته'
        name='weekDay'
        placeholder='انتخاب کنید'
        items={weekDayOptions}
        value={String(formik.values.weekDay)}
        onChange={(e) => formik.setFieldValue('weekDay', Number(e.target.value))}
        error_text={formik.touched.weekDay && formik.errors.weekDay ? String(formik.errors.weekDay) : ''}
      />

      <div className='grid grid-cols-2 gap-4'>
        <TimePicker
          label='زمان شروع'
          placeholder='انتخاب زمان شروع'
          defaultValue={formik.values.openTime}
          onChange={(time) => formik.setFieldValue('openTime', time)}
          error_text={formik.touched.openTime && formik.errors.openTime ? formik.errors.openTime : ''}
        />

        <TimePicker
          label='زمان پایان'
          placeholder='انتخاب زمان پایان'
          defaultValue={formik.values.closeTime}
          onChange={(time) => formik.setFieldValue('closeTime', time)}
          error_text={formik.touched.closeTime && formik.errors.closeTime ? formik.errors.closeTime : ''}
        />
      </div>

      <div className='flex items-center gap-3 pt-2'>
        <Switch
          active={formik.values.isActive}
          onChange={(value) => formik.setFieldValue('isActive', value)}
          label='فعال'
        />
      </div>
    </div>
  );
};

export default ScheduleFormFields;

