import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "../styled-jsx.es.js";
import React, { useState, useRef, useEffect, useMemo } from 'react';
// import countries from './countries.json';
import { useTheme } from '@helpdice/theme';
import { getColors } from './styles';
import useScale, { withScale } from '../use-scale';
import InputBlockLabel, { InputError } from './input-block-label';
var countries = [{
  "code": "AD",
  "label": "Andorra",
  "phone": "+376"
}, {
  "code": "AE",
  "label": "United Arab Emirates",
  "phone": "+971"
}, {
  "code": "AF",
  "label": "Afghanistan",
  "phone": "+93"
}, {
  "code": "AG",
  "label": "Antigua and Barbuda",
  "phone": "+1-268"
}, {
  "code": "AI",
  "label": "Anguilla",
  "phone": "+1-264"
}, {
  "code": "AL",
  "label": "Albania",
  "phone": "+355"
}, {
  "code": "AM",
  "label": "Armenia",
  "phone": "+374"
}, {
  "code": "AO",
  "label": "Angola",
  "phone": "+244"
}, {
  "code": "AQ",
  "label": "Antarctica",
  "phone": "+672"
}, {
  "code": "AR",
  "label": "Argentina",
  "phone": "+54"
}, {
  "code": "AS",
  "label": "American Samoa",
  "phone": "+1-684"
}, {
  "code": "AT",
  "label": "Austria",
  "phone": "+43"
}, {
  "code": "AU",
  "label": "Australia",
  "phone": "+61",
  "suggested": true
}, {
  "code": "AW",
  "label": "Aruba",
  "phone": "+297"
}, {
  "code": "AX",
  "label": "Alland Islands",
  "phone": "+358"
}, {
  "code": "AZ",
  "label": "Azerbaijan",
  "phone": "+994"
}, {
  "code": "BA",
  "label": "Bosnia and Herzegovina",
  "phone": "+387"
}, {
  "code": "BB",
  "label": "Barbados",
  "phone": "+1-246"
}, {
  "code": "BD",
  "label": "Bangladesh",
  "phone": "+880"
}, {
  "code": "BE",
  "label": "Belgium",
  "phone": "+32"
}, {
  "code": "BF",
  "label": "Burkina Faso",
  "phone": "+226"
}, {
  "code": "BG",
  "label": "Bulgaria",
  "phone": "+359"
}, {
  "code": "BH",
  "label": "Bahrain",
  "phone": "+973"
}, {
  "code": "BI",
  "label": "Burundi",
  "phone": "+257"
}, {
  "code": "BJ",
  "label": "Benin",
  "phone": "+229"
}, {
  "code": "BL",
  "label": "Saint Barthelemy",
  "phone": "+590"
}, {
  "code": "BM",
  "label": "Bermuda",
  "phone": "+1-441"
}, {
  "code": "BN",
  "label": "Brunei Darussalam",
  "phone": "+673"
}, {
  "code": "BO",
  "label": "Bolivia",
  "phone": "+591"
}, {
  "code": "BR",
  "label": "Brazil",
  "phone": "+55"
}, {
  "code": "BS",
  "label": "Bahamas",
  "phone": "+1-242"
}, {
  "code": "BT",
  "label": "Bhutan",
  "phone": "+975"
}, {
  "code": "BV",
  "label": "Bouvet Island",
  "phone": "+47"
}, {
  "code": "BW",
  "label": "Botswana",
  "phone": "+267"
}, {
  "code": "BY",
  "label": "Belarus",
  "phone": "+375"
}, {
  "code": "BZ",
  "label": "Belize",
  "phone": "+501"
}, {
  "code": "CA",
  "label": "Canada",
  "phone": "+1",
  "suggested": true
}, {
  "code": "CC",
  "label": "Cocos (Keeling) Islands",
  "phone": "+61"
}, {
  "code": "CD",
  "label": "Congo, Democratic Republic of the",
  "phone": "+243"
}, {
  "code": "CF",
  "label": "Central African Republic",
  "phone": "+236"
}, {
  "code": "CG",
  "label": "Congo, Republic of the",
  "phone": "+242"
}, {
  "code": "CH",
  "label": "Switzerland",
  "phone": "+41"
}, {
  "code": "CI",
  "label": "Cote d'Ivoire",
  "phone": "+225"
}, {
  "code": "CK",
  "label": "Cook Islands",
  "phone": "+682"
}, {
  "code": "CL",
  "label": "Chile",
  "phone": "+56"
}, {
  "code": "CM",
  "label": "Cameroon",
  "phone": "+237"
}, {
  "code": "CN",
  "label": "China",
  "phone": "+86"
}, {
  "code": "CO",
  "label": "Colombia",
  "phone": "+57"
}, {
  "code": "CR",
  "label": "Costa Rica",
  "phone": "+506"
}, {
  "code": "CU",
  "label": "Cuba",
  "phone": "+53"
}, {
  "code": "CV",
  "label": "Cape Verde",
  "phone": "+238"
}, {
  "code": "CW",
  "label": "Curacao",
  "phone": "+599"
}, {
  "code": "CX",
  "label": "Christmas Island",
  "phone": "+61"
}, {
  "code": "CY",
  "label": "Cyprus",
  "phone": "+357"
}, {
  "code": "CZ",
  "label": "Czech Republic",
  "phone": "+420"
}, {
  "code": "DE",
  "label": "Germany",
  "phone": "+49",
  "suggested": true
}, {
  "code": "DJ",
  "label": "Djibouti",
  "phone": "+253"
}, {
  "code": "DK",
  "label": "Denmark",
  "phone": "+45"
}, {
  "code": "DM",
  "label": "Dominica",
  "phone": "+1-767"
}, {
  "code": "DO",
  "label": "Dominican Republic",
  "phone": "+1-809"
}, {
  "code": "DZ",
  "label": "Algeria",
  "phone": "+213"
}, {
  "code": "EC",
  "label": "Ecuador",
  "phone": "+593"
}, {
  "code": "EE",
  "label": "Estonia",
  "phone": "+372"
}, {
  "code": "EG",
  "label": "Egypt",
  "phone": "+20"
}, {
  "code": "EH",
  "label": "Western Sahara",
  "phone": "+212"
}, {
  "code": "ER",
  "label": "Eritrea",
  "phone": "+291"
}, {
  "code": "ES",
  "label": "Spain",
  "phone": "+34"
}, {
  "code": "ET",
  "label": "Ethiopia",
  "phone": "+251"
}, {
  "code": "FI",
  "label": "Finland",
  "phone": "+358"
}, {
  "code": "FJ",
  "label": "Fiji",
  "phone": "+679"
}, {
  "code": "FK",
  "label": "Falkland Islands (Malvinas)",
  "phone": "+500"
}, {
  "code": "FM",
  "label": "Micronesia, Federated States of",
  "phone": "+691"
}, {
  "code": "FO",
  "label": "Faroe Islands",
  "phone": "+298"
}, {
  "code": "FR",
  "label": "France",
  "phone": "+33",
  "suggested": true
}, {
  "code": "GA",
  "label": "Gabon",
  "phone": "+241"
}, {
  "code": "GB",
  "label": "United Kingdom",
  "phone": "+44"
}, {
  "code": "GD",
  "label": "Grenada",
  "phone": "+1-473"
}, {
  "code": "GE",
  "label": "Georgia",
  "phone": "+995"
}, {
  "code": "GF",
  "label": "French Guiana",
  "phone": "+594"
}, {
  "code": "GG",
  "label": "Guernsey",
  "phone": "+44"
}, {
  "code": "GH",
  "label": "Ghana",
  "phone": "+233"
}, {
  "code": "GI",
  "label": "Gibraltar",
  "phone": "+350"
}, {
  "code": "GL",
  "label": "Greenland",
  "phone": "+299"
}, {
  "code": "GM",
  "label": "Gambia",
  "phone": "+220"
}, {
  "code": "GN",
  "label": "Guinea",
  "phone": "+224"
}, {
  "code": "GP",
  "label": "Guadeloupe",
  "phone": "+590"
}, {
  "code": "GQ",
  "label": "Equatorial Guinea",
  "phone": "+240"
}, {
  "code": "GR",
  "label": "Greece",
  "phone": "+30"
}, {
  "code": "GS",
  "label": "South Georgia and the South Sandwich Islands",
  "phone": "+500"
}, {
  "code": "GT",
  "label": "Guatemala",
  "phone": "+502"
}, {
  "code": "GU",
  "label": "Guam",
  "phone": "+1-671"
}, {
  "code": "GW",
  "label": "Guinea-Bissau",
  "phone": "+245"
}, {
  "code": "GY",
  "label": "Guyana",
  "phone": "+592"
}, {
  "code": "HK",
  "label": "Hong Kong",
  "phone": "+852"
}, {
  "code": "HM",
  "label": "Heard Island and McDonald Islands",
  "phone": "+672"
}, {
  "code": "HN",
  "label": "Honduras",
  "phone": "+504"
}, {
  "code": "HR",
  "label": "Croatia",
  "phone": "+385"
}, {
  "code": "HT",
  "label": "Haiti",
  "phone": "+509"
}, {
  "code": "HU",
  "label": "Hungary",
  "phone": "+36"
}, {
  "code": "ID",
  "label": "Indonesia",
  "phone": "+62"
}, {
  "code": "IE",
  "label": "Ireland",
  "phone": "+353"
}, {
  "code": "IL",
  "label": "Israel",
  "phone": "+972"
}, {
  "code": "IM",
  "label": "Isle of Man",
  "phone": "+44"
}, {
  "code": "IN",
  "label": "India",
  "phone": "+91"
}, {
  "code": "IO",
  "label": "British Indian Ocean Territory",
  "phone": "+246"
}, {
  "code": "IQ",
  "label": "Iraq",
  "phone": "+964"
}, {
  "code": "IR",
  "label": "Iran, Islamic Republic of",
  "phone": "+98"
}, {
  "code": "IS",
  "label": "Iceland",
  "phone": "+354"
}, {
  "code": "IT",
  "label": "Italy",
  "phone": "+39"
}, {
  "code": "JE",
  "label": "Jersey",
  "phone": "+44"
}, {
  "code": "JM",
  "label": "Jamaica",
  "phone": "+1-876"
}, {
  "code": "JO",
  "label": "Jordan",
  "phone": "+962"
}, {
  "code": "JP",
  "label": "Japan",
  "phone": "+81",
  "suggested": true
}, {
  "code": "KE",
  "label": "Kenya",
  "phone": "+254"
}, {
  "code": "KG",
  "label": "Kyrgyzstan",
  "phone": "+996"
}, {
  "code": "KH",
  "label": "Cambodia",
  "phone": "+855"
}, {
  "code": "KI",
  "label": "Kiribati",
  "phone": "+686"
}, {
  "code": "KM",
  "label": "Comoros",
  "phone": "+269"
}, {
  "code": "KN",
  "label": "Saint Kitts and Nevis",
  "phone": "+1-869"
}, {
  "code": "KP",
  "label": "Korea, Democratic People's Republic of",
  "phone": "+850"
}, {
  "code": "KR",
  "label": "Korea, Republic of",
  "phone": "+82"
}, {
  "code": "KW",
  "label": "Kuwait",
  "phone": "+965"
}, {
  "code": "KY",
  "label": "Cayman Islands",
  "phone": "+1-345"
}, {
  "code": "KZ",
  "label": "Kazakhstan",
  "phone": "+7"
}, {
  "code": "LA",
  "label": "Lao People's Democratic Republic",
  "phone": "+856"
}, {
  "code": "LB",
  "label": "Lebanon",
  "phone": "+961"
}, {
  "code": "LC",
  "label": "Saint Lucia",
  "phone": "+1-758"
}, {
  "code": "LI",
  "label": "Liechtenstein",
  "phone": "+423"
}, {
  "code": "LK",
  "label": "Sri Lanka",
  "phone": "+94"
}, {
  "code": "LR",
  "label": "Liberia",
  "phone": "+231"
}, {
  "code": "LS",
  "label": "Lesotho",
  "phone": "+266"
}, {
  "code": "LT",
  "label": "Lithuania",
  "phone": "+370"
}, {
  "code": "LU",
  "label": "Luxembourg",
  "phone": "+352"
}, {
  "code": "LV",
  "label": "Latvia",
  "phone": "+371"
}, {
  "code": "LY",
  "label": "Libya",
  "phone": "+218"
}, {
  "code": "MA",
  "label": "Morocco",
  "phone": "+212"
}, {
  "code": "MC",
  "label": "Monaco",
  "phone": "+377"
}, {
  "code": "MD",
  "label": "Moldova, Republic of",
  "phone": "+373"
}, {
  "code": "ME",
  "label": "Montenegro",
  "phone": "+382"
}, {
  "code": "MF",
  "label": "Saint Martin (French part)",
  "phone": "+590"
}, {
  "code": "MG",
  "label": "Madagascar",
  "phone": "+261"
}, {
  "code": "MH",
  "label": "Marshall Islands",
  "phone": "+692"
}, {
  "code": "MK",
  "label": "Macedonia, the Former Yugoslav Republic of",
  "phone": "+389"
}, {
  "code": "ML",
  "label": "Mali",
  "phone": "+223"
}, {
  "code": "MM",
  "label": "Myanmar",
  "phone": "+95"
}, {
  "code": "MN",
  "label": "Mongolia",
  "phone": "+976"
}, {
  "code": "MO",
  "label": "Macao",
  "phone": "+853"
}, {
  "code": "MP",
  "label": "Northern Mariana Islands",
  "phone": "+1-670"
}, {
  "code": "MQ",
  "label": "Martinique",
  "phone": "+596"
}, {
  "code": "MR",
  "label": "Mauritania",
  "phone": "+222"
}, {
  "code": "MS",
  "label": "Montserrat",
  "phone": "+1-664"
}, {
  "code": "MT",
  "label": "Malta",
  "phone": "+356"
}, {
  "code": "MU",
  "label": "Mauritius",
  "phone": "+230"
}, {
  "code": "MV",
  "label": "Maldives",
  "phone": "+960"
}, {
  "code": "MW",
  "label": "Malawi",
  "phone": "+265"
}, {
  "code": "MX",
  "label": "Mexico",
  "phone": "+52"
}, {
  "code": "MY",
  "label": "Malaysia",
  "phone": "+60"
}, {
  "code": "MZ",
  "label": "Mozambique",
  "phone": "+258"
}, {
  "code": "NA",
  "label": "Namibia",
  "phone": "+264"
}, {
  "code": "NC",
  "label": "New Caledonia",
  "phone": "+687"
}, {
  "code": "NE",
  "label": "Niger",
  "phone": "+227"
}, {
  "code": "NF",
  "label": "Norfolk Island",
  "phone": "+672"
}, {
  "code": "NG",
  "label": "Nigeria",
  "phone": "+234"
}, {
  "code": "NI",
  "label": "Nicaragua",
  "phone": "+505"
}, {
  "code": "NL",
  "label": "Netherlands",
  "phone": "+31"
}, {
  "code": "NO",
  "label": "Norway",
  "phone": "+47"
}, {
  "code": "NP",
  "label": "Nepal",
  "phone": "+977"
}, {
  "code": "NR",
  "label": "Nauru",
  "phone": "+674"
}, {
  "code": "NU",
  "label": "Niue",
  "phone": "+683"
}, {
  "code": "NZ",
  "label": "New Zealand",
  "phone": "+64"
}, {
  "code": "OM",
  "label": "Oman",
  "phone": "+968"
}, {
  "code": "PA",
  "label": "Panama",
  "phone": "+507"
}, {
  "code": "PE",
  "label": "Peru",
  "phone": "+51"
}, {
  "code": "PF",
  "label": "French Polynesia",
  "phone": "+689"
}, {
  "code": "PG",
  "label": "Papua New Guinea",
  "phone": "+675"
}, {
  "code": "PH",
  "label": "Philippines",
  "phone": "+63"
}, {
  "code": "PK",
  "label": "Pakistan",
  "phone": "+92"
}, {
  "code": "PL",
  "label": "Poland",
  "phone": "+48"
}, {
  "code": "PM",
  "label": "Saint Pierre and Miquelon",
  "phone": "+508"
}, {
  "code": "PN",
  "label": "Pitcairn",
  "phone": "+870"
}, {
  "code": "PR",
  "label": "Puerto Rico",
  "phone": "+1"
}, {
  "code": "PS",
  "label": "Palestine, State of",
  "phone": "+970"
}, {
  "code": "PT",
  "label": "Portugal",
  "phone": "+351"
}, {
  "code": "PW",
  "label": "Palau",
  "phone": "+680"
}, {
  "code": "PY",
  "label": "Paraguay",
  "phone": "+595"
}, {
  "code": "QA",
  "label": "Qatar",
  "phone": "+974"
}, {
  "code": "RE",
  "label": "Reunion",
  "phone": "+262"
}, {
  "code": "RO",
  "label": "Romania",
  "phone": "+40"
}, {
  "code": "RS",
  "label": "Serbia",
  "phone": "+381"
}, {
  "code": "RU",
  "label": "Russian Federation",
  "phone": "+7"
}, {
  "code": "RW",
  "label": "Rwanda",
  "phone": "+250"
}, {
  "code": "SA",
  "label": "Saudi Arabia",
  "phone": "+966"
}, {
  "code": "SB",
  "label": "Solomon Islands",
  "phone": "+677"
}, {
  "code": "SC",
  "label": "Seychelles",
  "phone": "+248"
}, {
  "code": "SD",
  "label": "Sudan",
  "phone": "+249"
}, {
  "code": "SE",
  "label": "Sweden",
  "phone": "+46"
}, {
  "code": "SG",
  "label": "Singapore",
  "phone": "+65"
}, {
  "code": "SH",
  "label": "Saint Helena",
  "phone": "+290"
}, {
  "code": "SI",
  "label": "Slovenia",
  "phone": "+386"
}, {
  "code": "SJ",
  "label": "Svalbard and Jan Mayen",
  "phone": "+47"
}, {
  "code": "SK",
  "label": "Slovakia",
  "phone": "+421"
}, {
  "code": "SL",
  "label": "Sierra Leone",
  "phone": "+232"
}, {
  "code": "SM",
  "label": "San Marino",
  "phone": "+378"
}, {
  "code": "SN",
  "label": "Senegal",
  "phone": "+221"
}, {
  "code": "SO",
  "label": "Somalia",
  "phone": "+252"
}, {
  "code": "SR",
  "label": "Suriname",
  "phone": "+597"
}, {
  "code": "SS",
  "label": "South Sudan",
  "phone": "+211"
}, {
  "code": "ST",
  "label": "Sao Tome and Principe",
  "phone": "+239"
}, {
  "code": "SV",
  "label": "El Salvador",
  "phone": "+503"
}, {
  "code": "SX",
  "label": "Sint Maarten (Dutch part)",
  "phone": "+1-721"
}, {
  "code": "SY",
  "label": "Syrian Arab Republic",
  "phone": "+963"
}, {
  "code": "SZ",
  "label": "Swaziland",
  "phone": "+268"
}, {
  "code": "TC",
  "label": "Turks and Caicos Islands",
  "phone": "+1-649"
}, {
  "code": "TD",
  "label": "Chad",
  "phone": "+235"
}, {
  "code": "TF",
  "label": "French Southern Territories",
  "phone": "+262"
}, {
  "code": "TG",
  "label": "Togo",
  "phone": "+228"
}, {
  "code": "TH",
  "label": "Thailand",
  "phone": "+66"
}, {
  "code": "TJ",
  "label": "Tajikistan",
  "phone": "+992"
}, {
  "code": "TK",
  "label": "Tokelau",
  "phone": "+690"
}, {
  "code": "TL",
  "label": "Timor-Leste",
  "phone": "+670"
}, {
  "code": "TM",
  "label": "Turkmenistan",
  "phone": "+993"
}, {
  "code": "TN",
  "label": "Tunisia",
  "phone": "+216"
}, {
  "code": "TO",
  "label": "Tonga",
  "phone": "+676"
}, {
  "code": "TR",
  "label": "Turkey",
  "phone": "+90"
}, {
  "code": "TT",
  "label": "Trinidad and Tobago",
  "phone": "+1-868"
}, {
  "code": "TV",
  "label": "Tuvalu",
  "phone": "+688"
}, {
  "code": "TW",
  "label": "Taiwan, Province of China",
  "phone": "+886"
}, {
  "code": "TZ",
  "label": "United Republic of Tanzania",
  "phone": "+255"
}, {
  "code": "UA",
  "label": "Ukraine",
  "phone": "+380"
}, {
  "code": "UG",
  "label": "Uganda",
  "phone": "+256"
}, {
  "code": "US",
  "label": "United States",
  "phone": "+1",
  "suggested": true
}, {
  "code": "UY",
  "label": "Uruguay",
  "phone": "+598"
}, {
  "code": "UZ",
  "label": "Uzbekistan",
  "phone": "+998"
}, {
  "code": "VA",
  "label": "Holy See (Vatican City State)",
  "phone": "+379"
}, {
  "code": "VC",
  "label": "Saint Vincent and the Grenadines",
  "phone": "+1-784"
}, {
  "code": "VE",
  "label": "Venezuela",
  "phone": "+58"
}, {
  "code": "VG",
  "label": "British Virgin Islands",
  "phone": "+1-284"
}, {
  "code": "VI",
  "label": "US Virgin Islands",
  "phone": "+1-340"
}, {
  "code": "VN",
  "label": "Vietnam",
  "phone": "+84"
}, {
  "code": "VU",
  "label": "Vanuatu",
  "phone": "+678"
}, {
  "code": "WF",
  "label": "Wallis and Futuna",
  "phone": "+681"
}, {
  "code": "WS",
  "label": "Samoa",
  "phone": "+685"
}, {
  "code": "XK",
  "label": "Kosovo",
  "phone": "+383"
}, {
  "code": "YE",
  "label": "Yemen",
  "phone": "+967"
}, {
  "code": "YT",
  "label": "Mayotte",
  "phone": "+262"
}, {
  "code": "ZA",
  "label": "South Africa",
  "phone": "+27"
}, {
  "code": "ZM",
  "label": "Zambia",
  "phone": "+260"
}, {
  "code": "ZW",
  "label": "Zimbabwe",
  "phone": "+263"
}];
function PhoneInput(_ref) {
  var onChange = _ref.onChange,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? '' : _ref$value,
    country = _ref.country,
    _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? 'Enter phone number' : _ref$placeholder,
    _ref$color = _ref.color,
    _color = _ref$color === void 0 ? 'default' : _ref$color,
    children = _ref.children,
    fullWidth = _ref.fullWidth,
    required = _ref.required,
    error = _ref.error,
    helperText = _ref.helperText;
  var theme = useTheme();
  var _useScale = useScale(),
    SCALES = _useScale.SCALES;
  var defaultValue = country ? countries.findIndex(function (cn) {
    return cn.code == country;
  }) : 103;
  var _useState = useState(countries[defaultValue]),
    _useState2 = _slicedToArray(_useState, 2),
    selectedCountry = _useState2[0],
    setSelectedCountry = _useState2[1];
  var _useState3 = useState(value),
    _useState4 = _slicedToArray(_useState3, 2),
    phoneNumber = _useState4[0],
    setPhoneNumber = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    isFocused = _useState6[0],
    setIsFocused = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    dropdownOpen = _useState8[0],
    setDropdownOpen = _useState8[1];
  var _useState9 = useState(''),
    _useState10 = _slicedToArray(_useState9, 2),
    searchTerm = _useState10[0],
    setSearchTerm = _useState10[1];
  var dropdownRef = useRef(null);
  var _useMemo = useMemo(function () {
      return getColors(theme.palette, _color);
    }, [theme.palette]),
    borderColor = _useMemo.borderColor,
    hoverBorder = _useMemo.hoverBorder;
  var handleSelectCountry = function handleSelectCountry(country) {
    setSelectedCountry(country);
    setDropdownOpen(false);
    setSearchTerm('');
    if (onChange) onChange("".concat(country.code, ":").concat(phoneNumber));
  };
  var handlePhoneChange = function handlePhoneChange(e) {
    var value = e.target.value.replace(/[^\d]/g, '');
    setPhoneNumber(value);
    if (onChange) onChange("".concat(selectedCountry.phone, ",").concat(value));
  };
  var handleClickOutside = function handleClickOutside(e) {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
      setDropdownOpen(false);
      setSearchTerm('');
    }
  };
  useEffect(function () {
    document.addEventListener('mousedown', handleClickOutside);
    return function () {
      return document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  var filteredCountries = countries.filter(function (c) {
    return "".concat(c.label, " ").concat(c.code, " ").concat(c.phone).toLowerCase().includes(searchTerm.toLowerCase());
  });
  var defaultWidth = fullWidth ? '100%' : 'initial';
  return /*#__PURE__*/React.createElement("div", {
    ref: dropdownRef,
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : '')
  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, {
    required: required
  }, children), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    onClick: function onClick() {
      return setDropdownOpen(!dropdownOpen);
    },
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 5,
      paddingRight: '15px'
    },
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
  }, /*#__PURE__*/React.createElement("img", {
    loading: "lazy",
    width: "20",
    height: "20",
    src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
    alt: "".concat(selectedCountry.label, " Flag"),
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
  }), /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
  }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
    type: "tel",
    placeholder: placeholder,
    value: phoneNumber,
    onChange: handlePhoneChange,
    onFocus: function onFocus() {
      return setIsFocused(true);
    },
    onBlur: function onBlur() {
      return setIsFocused(false);
    },
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
  })), helperText && /*#__PURE__*/React.createElement(InputError, {
    error: error,
    text: helperText
  }), dropdownOpen && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
  }, /*#__PURE__*/React.createElement("input", {
    type: "text",
    placeholder: "Search country...",
    value: searchTerm,
    onChange: function onChange(e) {
      return setSearchTerm(e.target.value);
    },
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
  }), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
  }, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
    return /*#__PURE__*/React.createElement("div", {
      key: c.code,
      onClick: function onClick() {
        return handleSelectCountry(c);
      },
      className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 5
      },
      className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
    }, /*#__PURE__*/React.createElement("img", {
      loading: "lazy",
      width: "23",
      height: "23",
      src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
      srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
      alt: "".concat(c.label, " Flag"),
      className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
      style: {
        color: 'grey'
      },
      className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
    }, c.label)));
  }) : /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1442942756",
    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
  }, ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
}
;
export default withScale(PhoneInput);