import {
  countryCodesToNames
} from "./chunk-5KSG5D3I.js";
import {
  TextInput
} from "./chunk-H5MRGJQP.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/PhoneInput.tsx
import {
  AsYouType,
  getCountries,
  getCountryCallingCode
} from "libphonenumber-js";
import {
  useCallback,
  useState
} from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var countries = getCountries();
var defaultOptions = countries.map((countryCode) => {
  return {
    value: countryCode,
    label: `${getCountryCallingCode(countryCode)} (${countryCodesToNames[countryCode]})`
  };
}).sort((a, b) => a.label.localeCompare(b.label));
function getSelectWidth(value, pxPerChar) {
  const label = getCountryCallingCode(value);
  const chars = label.length;
  return chars * pxPerChar + 30;
}
function PhoneInput({
  typography,
  onChange: onChangeProp,
  onBlur: onBlurProp,
  onFocus: onFocusProp,
  error: errorProp,
  pxPerChar = 6,
  defaultCountryCode = "US",
  borderRadius = 8
}) {
  const [countryCode, setCountryCode] = useState(defaultCountryCode);
  const [value, setValue] = useState("");
  const [width, setWidth] = useState(getSelectWidth(countryCode, pxPerChar));
  const [wasBlurred, setWasBlurred] = useState(false);
  const onChangeSelect = useCallback(
    (newValue) => {
      setCountryCode(newValue);
      const newWidth = getSelectWidth(newValue, pxPerChar);
      setWidth(newWidth);
    },
    [setCountryCode, setWidth, pxPerChar]
  );
  const options = defaultOptions.map((option) => {
    if (option.value === countryCode) {
      return __spreadProps(__spreadValues({}, option), {
        label: `+ ${getCountryCallingCode(countryCode)}`
      });
    }
    return option;
  });
  const onChange = useCallback(
    (newValue) => {
      const parsedValue = newValue.startsWith("+") ? newValue.slice(1) : newValue;
      const formatter2 = new AsYouType(countryCode);
      const formattedValue2 = formatter2.input(parsedValue);
      setValue(formattedValue2);
      const phoneNumber = formatter2.getNumber();
      if (onChangeProp && phoneNumber) {
        onChangeProp({
          number: phoneNumber.number,
          countryCallingCode: phoneNumber.countryCallingCode,
          nationalNumber: phoneNumber.nationalNumber,
          formatted: formattedValue2,
          isValid: phoneNumber.isValid()
        });
      }
    },
    [setValue, countryCode, onChangeProp]
  );
  const formatter = new AsYouType(countryCode);
  const formattedValue = formatter.input(value);
  const isValidPhone = formatter.isValid();
  const error = !isValidPhone && wasBlurred ? "Please enter a valid phone number." : void 0;
  return /* @__PURE__ */ jsx(
    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: 0.5,
      paddingY: 13.5
    }
  );
}

export {
  PhoneInput
};
