import React from 'react';
import { Control, UseFormClearErrors, FieldErrors } from 'react-hook-form';
import {
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormControl,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';

interface StudentRangeFieldsProps {
  control: Control<any>;
  clearErrors: UseFormClearErrors<any>;
  isRange: boolean;
  applicableIndex: number;
  setIndex: number;
}

const StudentRangeFields: React.FC<StudentRangeFieldsProps> = ({
  control,
  clearErrors,
  isRange,
  applicableIndex,
  setIndex,
}) => {
  // Don't render anything if not in range mode
  if (!isRange) {
    return null;
  }

  return (
    <>
      <FormField
        control={control}
        name={`applicable_sets.${applicableIndex}.sets.${setIndex}.min_students`}
        render={({ field }) => (
          <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2 rounded-full">
            <FormLabel className="no-error-styles font-bold">
              <span className="text-red-600 pl-1">*</span>
              Min Number of Students
            </FormLabel>
            <FormControl>
              <Input
                className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                placeholder="Enter Value"
                type="text"
                inputMode="numeric"
                {...field}
                onChange={(e) => {
                  if (/^\d*$/.test(e.target.value)) {
                    field.onChange(e);
                    clearErrors(
                      `applicable_sets.${applicableIndex}.sets.${setIndex}.min_students`,
                    );
                  }
                }}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={control}
        name={`applicable_sets.${applicableIndex}.sets.${setIndex}.max_students`}
        render={({ field }) => (
          <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2 rounded-full">
            <FormLabel className="no-error-styles font-bold">
              <span className="text-red-600 pl-1">*</span>
              Max Number of Students
            </FormLabel>
            <FormControl>
              <Input
                className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                placeholder="Enter Value"
                inputMode="numeric"
                {...field}
                onChange={(e) => {
                  if (/^\d*$/.test(e.target.value)) {
                    field.onChange(e);
                    clearErrors(
                      `applicable_sets.${applicableIndex}.sets.${setIndex}.max_students`,
                    );
                  }
                }}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </>
  );
};

export default StudentRangeFields;