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;
  }
  const MIN_LIMIT = 1;
  const MAX_LIMIT = 1000;
  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"
                min={1}
                max={100}
                {...field}
                onChange={(e) => {
                  if (/^\d*$/.test(e.target.value)) {
                    field.onChange(e);
                    clearErrors(
                      `applicable_sets.${applicableIndex}.sets.${setIndex}.min_students`,
                    );
                  }
                }}
              /> */}
              <Input
                className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                type="text"
                placeholder="Min Number of Students"
                inputMode="numeric"
                min={MIN_LIMIT}
                max={MAX_LIMIT}
                {...field}
                onKeyDown={(e) => {
                  // Allow control keys
                  if (
                    [
                      'Backspace',
                      'Delete',
                      'ArrowLeft',
                      'ArrowRight',
                      'Tab',
                    ].includes(e.key)
                  ) {
                    return;
                  }

                  // Block non-numeric
                  if (!/^\d$/.test(e.key)) {
                    e.preventDefault();
                  }
                }}
                onChange={(e) => {
                  const value = e.target.value;

                  if (/^\d*$/.test(value)) {
                    const num = Number(value);

                    if (
                      value === '' ||
                      (num >= MIN_LIMIT && num <= MAX_LIMIT)
                    ) {
                      field.onChange(value);
                      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"
                min={1}
                max={100}
                {...field}
                onChange={(e) => {
                  if (/^\d*$/.test(e.target.value)) {
                    field.onChange(e);
                    clearErrors(
                      `applicable_sets.${applicableIndex}.sets.${setIndex}.max_students`,
                    );
                  }
                }}
              /> */}
              <Input
                className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                type="text"
                placeholder="Max Number of Students"
                inputMode="numeric"
                min={MIN_LIMIT}
                max={MAX_LIMIT}
                {...field}
                onKeyDown={(e) => {
                  // Allow control keys
                  if (
                    [
                      'Backspace',
                      'Delete',
                      'ArrowLeft',
                      'ArrowRight',
                      'Tab',
                    ].includes(e.key)
                  ) {
                    return;
                  }

                  // Block non-numeric
                  if (!/^\d$/.test(e.key)) {
                    e.preventDefault();
                  }
                }}
                onChange={(e) => {
                  const value = e.target.value;

                  if (/^\d*$/.test(value)) {
                    const num = Number(value);

                    if (
                      value === '' ||
                      (num >= MIN_LIMIT && num <= MAX_LIMIT)
                    ) {
                      field.onChange(value);
                      clearErrors(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.max_students`,
                      );
                    }
                  }
                }}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </>
  );
};

export default StudentRangeFields;