import React from 'react';
import { Control, UseFormClearErrors, FieldErrors } 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;
}

const BonusFields: React.FC<BonusFieldsProps> = ({
  control,
  clearErrors,
  hasBonus,
  onHasBonusChange,
  hasBonusOptions,
  bonusTypeOptions,
  applicableIndex,
  setIndex,
  record,
}) => {
  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`,
                );
                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>
        )}
      />

      {hasBonus ||
        (String(record?.has_bonus) === '1' && (
          <BonusTypeAndAmountFields
            control={control}
            clearErrors={clearErrors}
            applicableIndex={applicableIndex}
            setIndex={setIndex}
            bonusTypeOptions={bonusTypeOptions}
            record={record}
          />
        ))}
    </>
  );
};

export default BonusFields;