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 { UnknownRecord } from '@/types';

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

interface BonusTypeAndAmountFieldsProps {
  control: Control<any>;
  clearErrors: UseFormClearErrors<any>;
  bonusTypeOptions: BonusOption[];
  applicableIndex: number;
  setIndex: number;
  record?: UnknownRecord;
}

const BonusTypeAndAmountFields: React.FC<BonusTypeAndAmountFieldsProps> = ({
  control,
  clearErrors,
  bonusTypeOptions,
  applicableIndex,
  setIndex,
  record,
}) => {
  return (
    <>
      <FormField
        control={control}
        name={`applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`}
        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>
              Bonus Type
            </FormLabel>
            <Select
              value={String(record?.bonus_type) || String(field.value)}
              onValueChange={(value) => {
                field.onChange(String(value));
                clearErrors(
                  `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_type`,
                );
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select Bonus" />
              </SelectTrigger>
              <SelectContent className="z-[9999]">
                {bonusTypeOptions.map((item) => (
                  <SelectItem key={String(item.id)} value={String(item.id)}>
                    {item.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />

      <div className="space-y-2 w-full md:w-1/2 lg:w-1/4 p-2 relative">
        <label className="text-sm font-bold">
          <span className="text-red-600 pl-1">*</span>
          Bonus Amount
        </label>
        <FormField
          control={control}
          name={`applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_amount`}
          render={({ field }) => (
            <FormItem className="space-y-2 w-full rounded-full">
              <FormControl>
                <Input
                  minLength={1}
                  maxLength={8}
                  type="text"
                  className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                  placeholder="Enter Bonus Amount"
                  value={
                    String(record?.bonus_amount) ?? String(field.value) ?? ''
                  }
                  onChange={(e) => {
                    if (/^\d*\.?\d*$/.test(String(e.target.value))) {
                      field.onChange(String(e.target.value));
                      clearErrors(
                        `applicable_sets.${applicableIndex}.sets.${setIndex}.bonus_amount`,
                      );
                    }
                  }}
                  onBlur={field.onBlur}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>
    </>
  );
};

export default BonusTypeAndAmountFields;