import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { countries } from "@arkyn/templates";
import { useId, useRef, useState } from "react";
import { findCountryMask, formatToPhone, removeNonNumeric, } from "@arkyn/shared";
import { useForm } from "../../hooks/useForm";
import { FieldError } from "../fieldError";
import { FieldLabel } from "../fieldLabel";
import { FieldWrapper } from "../fieldWrapper";
import { PhoneInputContainer } from "./phoneInputContainer";
import { PhoneInputCountriesOverlay } from "./phoneInputCountriesOverlay";
import { PhoneInputCountryOption } from "./phoneInputCountryOption";
import { PhoneInputCountryOptionsContainer } from "./phoneInputCountryOptionsContainer";
import { PhoneInputCountrySelector } from "./phoneInputCountrySelector";
import { PhoneInputMask } from "./phoneInputMask";
function PhoneInput(props) {
    const { defaultCountryIso, value: rawValue, label, className: wrapperClassName = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, } = props;
    const brasilCountry = countries.find((country) => country.iso === "BR");
    const defaultData = defaultValue ? formatToPhone(defaultValue) : "";
    const defaultCountry = defaultValue
        ? findCountryMask(defaultValue)[1]
        : brasilCountry;
    const [isFocused, setIsFocused] = useState(false);
    const [search, setSearch] = useState("");
    const [showCountryOptions, setShowCountryOptions] = useState(false);
    const [internalValue, setValue] = useState(defaultData);
    const value = rawValue !== undefined ? rawValue : internalValue;
    const [currentCountry, setCurrentCountry] = useState(defaultCountry);
    const { fieldErrors } = useForm();
    const phoneInputRef = useRef(null);
    const phoneInputId = id || useId();
    const errorMessage = baseErrorMessage || fieldErrors?.[name];
    const isError = !!errorMessage;
    const isDisabled = disabled || isLoading;
    const inputPhoneMaskRef = useRef(null);
    function handleContainerFocus() {
        if (isDisabled)
            return;
        if (isFocused || showCountryOptions)
            return;
        setIsFocused(true);
        if (inputPhoneMaskRef.current)
            inputPhoneMaskRef.current.focus();
    }
    function handleOpenCountryOptions() {
        setShowCountryOptions(true);
        setIsFocused(true);
    }
    function handleCloseCountryOptions() {
        setShowCountryOptions(false);
        setIsFocused(false);
    }
    function handleInputFocus() {
        setIsFocused(true);
    }
    function handleInputBlur() {
        setIsFocused(false);
    }
    function filterCountryFunction(country) {
        return country.name.toLowerCase().includes(search.toLowerCase());
    }
    function inputValue(props) {
        let returnValue = currentCountry.code;
        returnValue += removeNonNumeric(props || value);
        return returnValue;
    }
    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { htmlFor: phoneInputId, showAsterisk: showAsterisk, children: label })), _jsxs(PhoneInputContainer, { disabled: isDisabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
                                .filter((country) => filterCountryFunction(country))
                                .map((country) => (_jsx(PhoneInputCountryOption, { country: country, handleChangeValue: () => {
                                    setCurrentCountry(country);
                                    setShowCountryOptions(false);
                                    setValue("");
                                }, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
                                .length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { id: phoneInputId, ref: inputPhoneMaskRef, readonly: readOnly, currentCountry: currentCountry, value: value, disabled: isDisabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size, onChange: (e) => {
                            setValue(e);
                            onChange && onChange(inputValue(e));
                        } }), _jsx("input", { ref: phoneInputRef, type: "hidden", name: name, value: inputValue() })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
}
export { PhoneInput };
