import {
    FormControl, FormDescription,
    FormField, FormItem, FormLabel, FormMessage,
} from "@repo/shadcn-ui/components";
import { Control, FieldPath, FieldValues } from "react-hook-form";
import { PercentageInput, PercentageInputProps } from './percentage-input';

type PercentageInputFieldProps<T extends FieldValues> = {
    inputId?: string;
    control: Control<T>;
    name: FieldPath<T>;
    label?: string;
    description?: string;
    required?: boolean;
} & Omit<PercentageInputProps, "value" | "onChange">

export function PercentageInputField<T extends FieldValues>({
    inputId,
    control,
    name,
    label,
    description,
    required = false,
    ...inputProps
}: PercentageInputFieldProps<T>) {
    return (
        <FormField
            control={control}
            name={name}
            render={({ field }) => (
                <FormItem>
                    {label ? (
                        <FormLabel htmlFor={inputId}>
                            {label} {required ? <span aria-hidden="true">*</span> : null}
                        </FormLabel>
                    ) : null}
                    <FormControl>
                        <PercentageInput
                            id={inputId}
                            value={field.value}
                            onChange={field.onChange}
                            {...inputProps}
                        />
                    </FormControl>
                    {description ? <FormDescription>{description}</FormDescription> : null}
                    <FormMessage />
                </FormItem>
            )}
        />
    );
}
