import { type Component, onMount, onCleanup, createEffect } from 'solid-js';
import IMask from 'imask';

interface PhoneInputProps {
    value: string;
    onInput: (value: string) => void;
    placeholder?: string;
    class?: string;
    id?: string;
    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
    'aria-describedby'?: string;
}

const PhoneInput: Component<PhoneInputProps> = (props) => {
    let inputRef: HTMLInputElement | undefined;

    // Используем ReturnType для правильной типизации инстанса маски
    let maskInstance: ReturnType<typeof IMask> | null = null;

    onMount(() => {
        if (!inputRef) return;

        try {
            // Инициализируем маску
            maskInstance = IMask(inputRef, {
                mask: '+{49} 000 000000[00000]',
                lazy: false,
                placeholderChar: '_'
            });

            // Устанавливаем начальное значение
            if (props.value) {
                maskInstance.value = props.value;
            }

            // Слушаем ввод
            maskInstance.on('accept', () => {
                if (maskInstance) {
                    props.onInput(maskInstance.value);
                }
            });
        } catch (e) {
            console.error("IMask initialization failed", e);
        }
    });

    onCleanup(() => {
        if (maskInstance) {
            maskInstance.destroy();
            maskInstance = null;
        }
    });

    // Реакция на изменение props.value извне (например, очистка формы)
    createEffect(() => {
        const val = props.value || '';
        if (maskInstance && maskInstance.value !== val) {
            maskInstance.value = val;
        }
    });

    return (
        <input
            ref={inputRef}
            type="tel"
            placeholder={props.placeholder}
            class={props.class}
            id={props.id}
            aria-invalid={props['aria-invalid']}
            aria-describedby={props['aria-describedby']}
            autocomplete="tel"
        />
    );
};

export default PhoneInput;