import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import PhoneInput from '../../_virtual/lib.js';
import Typography from '../Typography/Typography.js';
import { isValidPhoneNumber } from '../../node_modules/.pnpm/react-phone-number-input@3._5cd5026d0a2bf4a8a06c93ebd54817cd/node_modules/react-phone-number-input/min/index.js';

const PhoneInputField = ({ country, value: initialValue, onChange, width = '100%', placeholder = 'Enter phone number', onFocus, onBlur, id, dropdownStyle = {}, enableAreaCodeStretch = false, disabled = false, isValid: initialIsValid = true, isVerified = false, isVerifyDisplay = false, onVerifyClick = () => { }, onValidationChange = () => { }, }) => {
    const [phone, setPhone] = useState(initialValue);
    const [isFocused, setIsFocused] = useState(false);
    const [isValid, setIsValid] = useState(initialIsValid);
    const [selectedCountry, setSelectedCountry] = useState(country);
    useEffect(() => {
        if (initialValue) {
            let formattedPhone = initialValue;
            if (!formattedPhone.startsWith('+')) {
                formattedPhone = `+${formattedPhone}`;
            }
            setPhone(formattedPhone);
        }
    }, [initialValue]);
    const validatePhoneNumber = (phoneNumber) => {
        const isPhoneValid = isValidPhoneNumber(phoneNumber);
        const isOnlyCountryCode = !!phoneNumber && phoneNumber.replace(/[^\d]/g, '').length <= 3;
        const isValidNumber = isPhoneValid || isOnlyCountryCode;
        setIsValid(isValidNumber);
        onValidationChange(isValidNumber);
    };
    const handlePhoneChange = (phone, countryData) => {
        const newCountryCode = countryData?.countryCode?.toLowerCase();
        const cleanedPhone = phone.replace(/[^0-9+]/g, '');
        if (selectedCountry?.toLowerCase() !== newCountryCode) {
            setPhone(countryData?.dialCode);
            onChange(countryData?.dialCode);
            setSelectedCountry(newCountryCode);
            setIsValid(true);
            return;
        }
        let formattedPhone = cleanedPhone;
        if (!formattedPhone.startsWith('+')) {
            formattedPhone = `+${formattedPhone}`;
        }
        setPhone(formattedPhone);
        onChange(formattedPhone);
        validatePhoneNumber(formattedPhone);
    };
    const handleFocus = (event) => {
        setIsFocused(true);
        if (onFocus)
            onFocus(event);
    };
    const handleBlur = (event) => {
        setIsFocused(false);
        if (onBlur)
            onBlur(event);
        validatePhoneNumber(phone);
    };
    return (jsxs("div", { id: id, children: [jsx(PhoneInput, { specialLabel: "", countryCodeEditable: false, country: country, value: phone, onChange: handlePhoneChange, inputStyle: {
                    width,
                    height: '32px',
                    border: isFocused
                        ? '1px solid var(--brand-color)'
                        : !isValid
                            ? '1px solid var(--error_light)'
                            : '1px solid var(--default-color)',
                    borderRadius: '4px',
                    fontSize: '14px',
                    transition: 'border-color 0.3s ease',
                }, enableSearch: true, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, dropdownStyle: dropdownStyle, enableAreaCodeStretch: enableAreaCodeStretch, disabled: disabled }), !isValid && !isFocused && (jsx(Typography, { color: 'var(--error_light)', className: "error", fontSize: 10, children: "Invalid phone number format" })), isVerified ? (jsx(Typography, { color: "var(--phone-number-verified-color)", children: "Verified" })) : (isValidPhoneNumber(phone) &&
                isVerifyDisplay &&
                !isVerified && (jsx(Typography, { color: "var(--brand-color)", className: "cursor_pointer", onClick: onVerifyClick, children: "Verify" })))] }));
};

export { PhoneInputField as default };
//# sourceMappingURL=PhoneInput.js.map
