import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState, useRef } from 'react';
import { Chevron } from '../../../assets/chevron.mjs';
import { useErrorProps } from '../../../utils/accessibility.mjs';
import { formatNumber } from '../../../utils/handleParsePhoneNumber.mjs';
import { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps.mjs';
import ErrorText from './ErrorText.mjs';
import Input from './Input.mjs';
import modules_2f821ae3 from './PhoneInput.module.css.mjs';
import { COUNTRIES_LIST } from '../../../../../core/src/utils/country.mjs';

// What the library returns by default for the US
const DEFAULT_TEL_PLACEHOLDER = '(201) 555-0123';
const getPhoneNumberProps = (clientsideServices)=>({
        getExampleNumber: (countryCode)=>clientsideServices.getExamplePhoneNumber({
                regionCode: countryCode
            }).then((res)=>res.phoneNumber),
        parsePhoneNumber: (phoneNumber, countryCode)=>clientsideServices.parsedPhoneNumber({
                phoneNumber,
                regionCode: countryCode
            })
    });
const PhoneInput = ({ phone, setPhone, country, setCountry, parsePhoneNumber, getExampleNumber, hasPasskeys, // Handle error ourselves instead of delegating down to <Input>
// since the layout would be wrong in that case (it would appear to the right of the <select>)
error, ...additionalProps })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const inputProps = useErrorProps(error);
    const countryFormatter = new Intl.DisplayNames([
        'en'
    ], {
        type: 'region'
    });
    const [placeholder, setPlaceholder] = useState(DEFAULT_TEL_PLACEHOLDER);
    const inputRef = useRef(null);
    const [phoneValue, setPhoneValue] = useState(phone);
    return /*#__PURE__*/ React__default.createElement("div", {
        className: modules_2f821ae3.container
    }, /*#__PURE__*/ React__default.createElement("select", {
        "aria-label": $__i18n._({
            id: "formField.countryCode.label",
            message: "Country code"
        }),
        className: modules_2f821ae3.select,
        autoComplete: "tel-country-code",
        value: country,
        onChange: async (e)=>{
            const userInput = e.target.value;
            setCountry(userInput);
            inputRef.current?.focus();
            const newPlaceholder = await Promise.race([
                getExampleNumber(country),
                new Promise((resolve)=>setTimeout(()=>resolve(undefined), 100))
            ]);
            if (userInput !== e.target.value) return;
            setPlaceholder(newPlaceholder ?? DEFAULT_TEL_PLACEHOLDER);
        }
    }, Object.entries(COUNTRIES_LIST).map(([code, number])=>/*#__PURE__*/ React__default.createElement("option", {
            key: code,
            value: code
        }, code !== country ? `+${number} ${countryFormatter.of(code)}` : `+${number}`))), /*#__PURE__*/ React__default.createElement(Chevron, {
        className: modules_2f821ae3.chevron,
        role: "presentation"
    }), /*#__PURE__*/ React__default.createElement(Input, {
        id: "phone-input",
        label: $__i18n._({
            id: "formField.phone.label",
            message: "Phone number"
        }),
        hideLabel: true,
        ref: inputRef,
        type: "tel",
        autoComplete: hasPasskeys ? 'username webauthn' : 'tel-national',
        containerClassName: modules_2f821ae3.phone,
        value: phoneValue,
        placeholder: placeholder,
        onChange: async (e)=>{
            const userInput = e.target.value;
            setPhoneValue(userInput);
            const national = await formatNumber({
                parsePhoneNumber,
                phoneNumber: userInput,
                country
            });
            // Disregard stale results
            if (userInput !== e.target.value) {
                return;
            }
            setPhone(national);
            setPhoneValue(national);
        },
        required: true,
        ...inputProps.input,
        ...hasPasskeys ? passwordManagerDisableAutofillProps : {},
        ...additionalProps
    }), error && /*#__PURE__*/ React__default.createElement("div", {
        className: modules_2f821ae3.error
    }, /*#__PURE__*/ React__default.createElement(ErrorText, inputProps.error, error)));
};

export { PhoneInput as default, getPhoneNumberProps };
//# sourceMappingURL=PhoneInput.mjs.map
