import type React from 'react';
import { createContext, forwardRef, useContext } from 'react';
import type { ControllerRenderProps } from 'react-hook-form';

type ControllerRenderPropsType = ControllerRenderProps<
    Record<string, string>,
    string
>;

export const CustomInputContext =
    createContext<ControllerRenderPropsType | null>(null);

type CustomInputProps = React.InputHTMLAttributes<HTMLInputElement>;

export const CustomInput = forwardRef(
    (props: CustomInputProps, ref: React.Ref<HTMLInputElement>) => {
        const fieldProps = useContext(CustomInputContext);

        if (!fieldProps) {
            throw new Error(
                '<CustomInput> must be used within a <ControlledPhoneNumberInput>'
            );
        }

        const value = fieldProps.value?.includes('*')
            ? fieldProps.value
            : props.value;

        const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
            if (ev.target.value.includes('*')) {
                fieldProps.onChange(ev.target.value);
            } else {
                props.onChange?.(ev);
            }
        };

        const handleKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
            if (fieldProps.value?.includes('*')) {
                return;
            }

            props.onKeyDown?.(ev);
        };

        return (
            <input
                ref={ref}
                {...props}
                value={value}
                onChange={handleChange}
                onKeyDown={handleKeyDown}
            />
        );
    }
);