import React from 'react';
import { Control, UseFormClearErrors } from 'react-hook-form';
import {
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { MultiSelect } from '@/components/ui/multi-select';
import { transformMultipleSelectOptions } from '@/utils/transformers';
import { UnknownRecord } from '@/types';

interface Campus {
  id: number;
  campName: string;
}

interface StudyLevel {
  id: number;
  name: string;
}

interface CourseOption {
  label: string;
  value: string;
}

interface ApplicableOnSectionProps {
  control: Control<any>;
  clearErrors: UseFormClearErrors<any>;
  index: number;
  campusCondition: string;
  studyLevelCondition: string;
  courseCondition: string;
  campuses: Campus[];
  studyLevels: StudyLevel[];
  studyLevelCoursesList: CourseOption[];
  onCourseLevelsChange: (index: number) => void;
  record?: UnknownRecord;
}

const ApplicableOnSection: React.FC<ApplicableOnSectionProps> = ({
  control,
  clearErrors,
  index,
  campusCondition,
  studyLevelCondition,
  courseCondition,
  campuses,
  studyLevels,
  studyLevelCoursesList,
  onCourseLevelsChange,
  record,
}) => {
  // Don't render anything if no conditions are met
  if (
    String(campusCondition) !== '2' &&
    String(studyLevelCondition) !== '2' &&
    String(courseCondition) !== '2'
  ) {
    return null;
  }

  return (
    <div className="commission-instance-widget mt-4 mb-4">
      <div className="flex flex-wrap w-full">
        {String(campusCondition) === '2' && (
          <FormField
            control={control}
            name={`applicable_sets.${index}.applicable_campuses`}
            render={({ field }) => (
              <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2">
                <FormLabel className="font-bold">
                  <span className="text-red-600 pl-1">*</span>
                  Campus
                </FormLabel>
                <MultiSelect
                  // defaultValue={record?.applicable_campuses ?? []}
                  options={campuses.map((item) => ({
                    label: item.campName,
                    value: String(item.id),
                  }))}
                  onValueChange={(value) => {
                    field.onChange(value);
                    clearErrors(`applicable_sets.${index}.applicable_campuses`);
                    onCourseLevelsChange(index);
                  }}
                  value={field.value || []}
                  placeholder="Choose Campus"
                  maxCount={1}
                />
                <FormMessage />
              </FormItem>
            )}
          />
        )}

        {String(studyLevelCondition) === '2' && (
          <FormField
            control={control}
            name={`applicable_sets.${index}.applicable_study_levels`}
            render={({ field }) => (
              <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2">
                <FormLabel className="font-bold">
                  <span className="text-red-600 pl-1">*</span>
                  Study Level
                </FormLabel>
                <MultiSelect
                  // defaultValue={record?.applicable_study_levels ?? []}
                  options={transformMultipleSelectOptions(studyLevels)}
                  onValueChange={(value) => {
                    field.onChange(value);
                    clearErrors(
                      `applicable_sets.${index}.applicable_study_levels`,
                    );
                    onCourseLevelsChange(index);
                  }}
                  value={field.value || []}
                  placeholder="Select Study Level"
                  maxCount={1}
                />
                <FormMessage />
              </FormItem>
            )}
          />
        )}

        {String(courseCondition) === '2' && (
          <FormField
            control={control}
            name={`applicable_sets.${index}.applicable_courses`}
            render={({ field }) => (
              <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2">
                <FormLabel className="font-bold">
                  <span className="text-red-600 pl-1">*</span>
                  Study Level Courses
                </FormLabel>
                <MultiSelect
                  // defaultValue={record?.applicable_courses ?? []}
                  options={
                    transformMultipleSelectOptions(studyLevelCoursesList) || []
                  }
                  onValueChange={(value) => {
                    field.onChange(value);
                    clearErrors(`applicable_sets.${index}.applicable_courses`);
                  }}
                  value={field.value || []}
                  placeholder="Select Study Level Courses"
                  maxCount={1}
                />
                <FormMessage />
              </FormItem>
            )}
          />
        )}
      </div>
    </div>
  );
};

export default ApplicableOnSection;