Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../chunk-BN4qSVkS.cjs");
const require_components_TextInput = require("./TextInput.cjs");
const require_utils_countryCodesToNames = require("../utils/countryCodesToNames.cjs");
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let libphonenumber_js = require("libphonenumber-js");
//#region src/components/PhoneInput.tsx
const defaultOptions = (0, libphonenumber_js.getCountries)().map((countryCode) => {
	return {
		value: countryCode,
		label: `${(0, libphonenumber_js.getCountryCallingCode)(countryCode)} (${require_utils_countryCodesToNames.countryCodesToNames[countryCode]})`
	};
}).sort((a, b) => a.label.localeCompare(b.label));
function getSelectWidth(value, pxPerChar) {
	return (0, libphonenumber_js.getCountryCallingCode)(value).length * pxPerChar + 30;
}
function PhoneInput({ typography, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, error: errorProp, pxPerChar = 6, defaultCountryCode = "US", borderRadius = 8 }) {
	const [countryCode, setCountryCode] = (0, react.useState)(defaultCountryCode);
	const [value, setValue] = (0, react.useState)("");
	const [width, setWidth] = (0, react.useState)(getSelectWidth(countryCode, pxPerChar));
	const [wasBlurred, setWasBlurred] = (0, react.useState)(false);
	const onChangeSelect = (0, react.useCallback)((newValue) => {
		setCountryCode(newValue);
		setWidth(getSelectWidth(newValue, pxPerChar));
	}, [
		setCountryCode,
		setWidth,
		pxPerChar
	]);
	const options = defaultOptions.map((option) => {
		if (option.value === countryCode) return {
			...option,
			label: `+ ${(0, libphonenumber_js.getCountryCallingCode)(countryCode)}`
		};
		return option;
	});
	const onChange = (0, react.useCallback)((newValue) => {
		const parsedValue = newValue.startsWith("+") ? newValue.slice(1) : newValue;
		const formatter = new libphonenumber_js.AsYouType(countryCode);
		const formattedValue = formatter.input(parsedValue);
		setValue(formattedValue);
		const phoneNumber = formatter.getNumber();
		if (onChangeProp && phoneNumber) onChangeProp({
			number: phoneNumber.number,
			countryCallingCode: phoneNumber.countryCallingCode,
			nationalNumber: phoneNumber.nationalNumber,
			formatted: formattedValue,
			isValid: phoneNumber.isValid()
		});
	}, [
		setValue,
		countryCode,
		onChangeProp
	]);
	const formatter = new libphonenumber_js.AsYouType(countryCode);
	const formattedValue = formatter.input(value);
	const error = !formatter.isValid() && wasBlurred ? "Please enter a valid phone number." : void 0;
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_TextInput.TextInput, {
		select: {
			options,
			value: countryCode,
			onChange: onChangeSelect,
			width,
			height: 54
		},
		pattern: "[0-9,]*",
		inputMode: "numeric",
		value: formattedValue,
		onFocus: (focusEvent) => {
			if (onFocusProp) onFocusProp(focusEvent);
		},
		onBlur: (blurEvent) => {
			setWasBlurred(true);
			if (onBlurProp) onBlurProp(blurEvent);
		},
		onChange,
		error: errorProp || error,
		typography,
		borderRadius,
		borderWidth: .5,
		paddingY: 13.5
	});
}
//#endregion
exports.PhoneInput = PhoneInput;
