import React, { useState } from 'react';
import {
  Control,
  UseFormClearErrors,
  FieldErrors,
  UseFormSetValue,
  useWatch,
} from 'react-hook-form';
import {
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormControl,
} from '@/components/ui/form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import BonusTypeAndAmountFields from './BonusTypeAndAmountFields';
import { UnknownRecord } from '@/types';

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

interface BonusFieldsProps {
  control: Control<any>;
  clearErrors: UseFormClearErrors<any>;
  applicableIndex: number;
  setIndex: number;
  hasBonus: boolean;
  onHasBonusChange: (
    applicableIndex: number,
    setIndex: number,
    value: string,
  ) => void;
  hasBonusOptions: BonusOption[];
  bonusTypeOptions: BonusOption[];
  record?: UnknownRecord;
  getValues: any;
  setValue: UseFormSetValue<any>;
}

const BonusFields: React.FC<BonusFieldsProps> = ({
  control,
  clearErrors,
  hasBonus,
  onHasBonusChange,
  hasBonusOptions,
  bonusTypeOptions,
  applicableIndex,
  setIndex,
  record,
  getValues,
  setValue,
}) => {
  const watchedHasBonus = useWatch({
    control,
    name: `applicable_sets.${applicableIndex}.sets.${setIndex}.has_bonus`,
  });

  const shouldShowBonusFields =
    watchedHasBonus === '1' || String(record?.has_bonus) === '1';
  const [hasBonusValue, setHasBonusValue] = useState<boolean>(
    shouldShowBonusFields,
  );

  return (
    <>
      <FormField
        control={control}
        name={`applicable_sets.${applicableIndex}.sets.${setIndex}.has_bonus`}
        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>
              Has Bonus
            </FormLabel>
            <Select
              value={String(field.value || '')}
              onValueChange={(value: string) => {
                field.onChange(String(value));
                clearErrors(
                  `applicable_sets.${applicableIndex}.sets.${setIndex}.has_bonus`,
                );
                if (value !== '1') {
                  setValue(
                    `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                    '',
                  );
                  setValue(
                    `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_amount`,
                    '',
                  );
                }
                setHasBonusValue(value === '1');
                onHasBonusChange(applicableIndex, setIndex, String(value));
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select Has Bonus" />
              </SelectTrigger>
              <SelectContent className="z-[9999]">
                {hasBonusOptions.map((item) => (
                  <SelectItem key={String(item.id)} value={String(item.id)}>
                    {item.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />

      {hasBonusValue && (
        <BonusTypeAndAmountFields
          control={control}
          clearErrors={clearErrors}
          applicableIndex={applicableIndex}
          setIndex={setIndex}
          bonusTypeOptions={bonusTypeOptions}
          record={record}
          getValues={getValues}
          setValue={setValue}
        />
      )}
    </>
  );
};

export default BonusFields;