import { jsx as _jsx } from "react/jsx-runtime";
import { InputMask } from "@react-input/mask";
import { forwardRef, useEffect, useState, } from "react";
import { applyMask, clear, getMask, MAX_LENGTH, TYPES, } from "../../../utils/phoneInputUtilities";
import "./style.css";
const BaseInput = forwardRef((props, ref) => {
    return _jsx("input", { ref: ref, ...props });
});
const PhoneInputMask = forwardRef((props, ref) => {
    const { onFocus, readonly, onBlur, size, onChange, value, currentCountry, disabled, id, } = props;
    const [isMounted, setIsMounted] = useState(false);
    const mask = typeof currentCountry.mask === "string"
        ? currentCountry.mask
        : currentCountry.mask[0];
    useEffect(() => {
        if (isMounted)
            onChange(mask);
        else
            setIsMounted(true);
    }, [currentCountry]);
    const className = `phoneInputMask ${size}`;
    function handleChange(event) {
        let value = clear(event.target.value);
        const mask = getMask(value);
        let nextLength = value.length;
        if (nextLength > MAX_LENGTH)
            return;
        value = applyMask(value, TYPES[mask]);
        event.target.value = value;
        onChange(value);
    }
    if (currentCountry.code === "+55") {
        return (_jsx("input", { id: id, value: value, onChange: handleChange, className: className, onFocus: onFocus, onBlur: onBlur, disabled: disabled, ref: ref }));
    }
    return (_jsx(InputMask, { id: id, value: value, readOnly: readonly, onChange: (e) => onChange(e.target.value), className: className, component: BaseInput, onFocus: onFocus, onBlur: onBlur, disabled: disabled, mask: mask, showMask: true, replacement: { _: /\d/ }, ref: ref }));
});
export { PhoneInputMask };
