"use strict";Object.defineProperty(exports, "__esModule", {value: true});

var _chunk4XPAKKBScjs = require('./chunk-4XPAKKBS.cjs');


var _chunkILBP4CTUcjs = require('./chunk-ILBP4CTU.cjs');



var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');

// src/components/PhoneInput.tsx




var _libphonenumberjs = require('libphonenumber-js');



var _react = require('react');
var _jsxruntime = require('@emotion/react/jsx-runtime');
var countries = _libphonenumberjs.getCountries.call(void 0, );
var defaultOptions = countries.map((countryCode) => {
  return {
    value: countryCode,
    label: `${_libphonenumberjs.getCountryCallingCode.call(void 0, countryCode)} (${_chunk4XPAKKBScjs.countryCodesToNames[countryCode]})`
  };
}).sort((a, b) => a.label.localeCompare(b.label));
function getSelectWidth(value, pxPerChar) {
  const label = _libphonenumberjs.getCountryCallingCode.call(void 0, 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] = _react.useState.call(void 0, defaultCountryCode);
  const [value, setValue] = _react.useState.call(void 0, "");
  const [width, setWidth] = _react.useState.call(void 0, getSelectWidth(countryCode, pxPerChar));
  const [wasBlurred, setWasBlurred] = _react.useState.call(void 0, false);
  const onChangeSelect = _react.useCallback.call(void 0, 
    (newValue) => {
      setCountryCode(newValue);
      const newWidth = getSelectWidth(newValue, pxPerChar);
      setWidth(newWidth);
    },
    [setCountryCode, setWidth, pxPerChar]
  );
  const options = defaultOptions.map((option) => {
    if (option.value === countryCode) {
      return _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, option), {
        label: `+ ${_libphonenumberjs.getCountryCallingCode.call(void 0, countryCode)}`
      });
    }
    return option;
  });
  const onChange = _react.useCallback.call(void 0, 
    (newValue) => {
      const parsedValue = newValue.startsWith("+") ? newValue.slice(1) : newValue;
      const formatter2 = new (0, _libphonenumberjs.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 (0, _libphonenumberjs.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__ */ _jsxruntime.jsx.call(void 0, 
    _chunkILBP4CTUcjs.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
    }
  );
}



exports.PhoneInput = PhoneInput;
