import React from 'react';
import { Control, UseFormClearErrors, FieldErrors } from 'react-hook-form';
import { FormField } from '@/components/ui/form';
import { UnknownRecord } from '@/types';
import { SearchableSelect } from '../../forms/SearchableSelect';

interface ConditionOption {
  id: number | string;
  name: string;
}

interface ConditionFieldsProps {
  control: Control<any>;
  clearErrors: UseFormClearErrors<any>;
  dropdownStates: {
    campus_condition: boolean;
    study_level_condition: boolean;
    course_condition: boolean;
  };
  toggleDropdown: (
    key: 'campus_condition' | 'study_level_condition' | 'course_condition',
  ) => void;
  setDropdownStates: React.Dispatch<React.SetStateAction<any>>;
  onCampusConditionChange: (value: string) => void;
  onStudyLevelConditionChange: (value: string) => void;
  onCourseConditionChange: (value: string) => void;
  conditionOptions: ConditionOption[];
  campusCondition: string;
  studyLevelCondition: string;
  courseCondition: string;
  record?: UnknownRecord;
}

const ConditionFields: React.FC<ConditionFieldsProps> = ({
  control,
  clearErrors,
  dropdownStates,
  toggleDropdown,
  setDropdownStates,
  onCampusConditionChange,
  onStudyLevelConditionChange,
  onCourseConditionChange,
  conditionOptions,
  campusCondition,
  studyLevelCondition,
  courseCondition,
  record,
}) => {
  return (
    <>
      <FormField
        control={control}
        name="campus_condition"
        render={({ field }) => (
          <SearchableSelect
            field={field}
            label="Campus Condition"
            placeholder="Choose Campus Condition"
            defaultValue={campusCondition || field.value}
            options={conditionOptions.map((item) => ({
              id: item.id,
              name: item.name,
            }))}
            isOpen={dropdownStates.campus_condition}
            onOpenChange={() => toggleDropdown('campus_condition')}
            onSelect={(value) => {
              field.onChange(value);
              clearErrors('campus_condition');
              onCampusConditionChange(String(value));
              setDropdownStates((prev: any) => ({
                ...prev,
                campus_condition: false,
              }));
            }}
            disabled={
              record?.campus_condition === '2' || record?.campus_condition === 2
            }
            required
          />
        )}
      />

      <FormField
        control={control}
        name="study_level_condition"
        render={({ field }) => (
          <SearchableSelect
            field={field}
            label="Study Level Condition"
            placeholder="Choose Study Level Condition"
            defaultValue={studyLevelCondition || field.value}
            options={conditionOptions.map((item) => ({
              id: item.id,
              name: item.name,
            }))}
            isOpen={dropdownStates.study_level_condition}
            onOpenChange={() => toggleDropdown('study_level_condition')}
            onSelect={(value) => {
              field.onChange(value);
              clearErrors('study_level_condition');
              onStudyLevelConditionChange(String(value));
              setDropdownStates((prev: any) => ({
                ...prev,
                study_level_condition: false,
              }));
            }}
            disabled={
              record?.study_level_condition === '2' ||
              record?.study_level_condition === 2
            }
            required
          />
        )}
      />

      <FormField
        control={control}
        name="course_condition"
        render={({ field }) => (
          <SearchableSelect
            field={field}
            label="Course Condition"
            placeholder="Choose Course Condition"
            defaultValue={courseCondition || field.value}
            options={conditionOptions.map((item) => ({
              id: item.id,
              name: item.name,
            }))}
            isOpen={dropdownStates.course_condition}
            onOpenChange={() => toggleDropdown('course_condition')}
            onSelect={(value) => {
              field.onChange(value);
              clearErrors('course_condition');
              onCourseConditionChange(String(value));
              setDropdownStates((prev: any) => ({
                ...prev,
                course_condition: false,
              }));
            }}
            disabled={
              record?.course_condition === '2' || record?.course_condition === 2
            }
            required
          />
        )}
      />
    </>
  );
};

export default ConditionFields;