import { CommonInputProps } from '@repo/rdx-ui/components';
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@repo/shadcn-ui/components';
import { Control, FieldPath, FieldValues } from 'react-hook-form';
import { QuantityInput, QuantityInputProps } from './quantity-input';


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


export function QuantityInputField<TFormValues extends FieldValues>({
    inputId,
    control,
    name,
    label,
    description,
    required = false,
    ...inputProps
}: QuantityInputFieldProps<TFormValues>) {

    return (
        <FormField
            control={control}
            name={name}
            render={({ field }) => {
                const { value, onChange } = field;

                return <FormItem>
                    {label ? (
                        <FormLabel htmlFor={inputId}>
                            {label} {required ? <span aria-hidden='true'>*</span> : null}
                        </FormLabel>
                    ) : null}
                    <FormControl>
                        <QuantityInput
                            id={inputId}
                            value={value}
                            onChange={onChange}
                            {...inputProps}
                        />
                    </FormControl>
                    {description ? <FormDescription>{description}</FormDescription> : null}
                    <FormMessage />
                </FormItem>
            }}
        />
    );
}

