import { PhoneNumberInput } from '@/components/PhoneNumberInput';
import { CustomInput, CustomInputContext } from './CustomInput';
import type { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
import type { PhoneNumberInputProps } from '@/components/PhoneNumberInput';

export type ControlledPhoneNumberInputProps<
    TFieldValues extends FieldValues,
    TFieldName extends Path<TFieldValues>,
> = {
    field: ControllerRenderProps<TFieldValues, TFieldName>;
} & Omit<PhoneNumberInputProps, 'innerRef' | 'value' | 'onChange' | 'onBlur'>;

export function ControlledPhoneNumberInput<
    TFieldValues extends FieldValues,
    TFieldName extends Path<TFieldValues>,
>({
    field,
    isError,
    ...props
}: ControlledPhoneNumberInputProps<TFieldValues, TFieldName>) {
    const { onChange, onBlur, value, ref, ...fieldProps } = field;

    const safeValue = value?.includes('*') ? undefined : value;

    const safeHandleChange = (value?: string) => {
        if (value === undefined) {
            onChange(null);
        } else {
            onChange(value);
        }
    };

    return (
        <CustomInputContext.Provider value={field}>
            <PhoneNumberInput
                innerRef={ref}
                value={safeValue}
                onChange={safeHandleChange}
                onBlur={onBlur}
                isError={isError}
                inputComponent={CustomInput}
                {...fieldProps}
                {...props}
            />
        </CustomInputContext.Provider>
    );
}