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 'components/use-theme';
import { getColors } from 'components/input/styles';
var PhoneInput = 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;
  var theme = useTheme();
  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.code).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());
  });
  return /*#__PURE__*/React.createElement("div", {
    ref: dropdownRef,
    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, 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
    },
    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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(selectedCountry.code.toLowerCase(), ".png"),
    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
    alt: "Flag of ".concat(selectedCountry.label),
    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
  }), /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
  }), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, 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: "Flag of ".concat(c.label),
      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
      style: {
        color: 'grey'
      },
      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
    }, c.label)));
  }) : /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "785147617",
    dynamic: [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
  }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;max-width:400px;}.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, ";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{-webkit-flex:1;-ms-flex:1;flex:1;padding:5px 10px;height:35px;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:100%;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 PhoneInput;