"use strict";

require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.object.define-property.js");
require("core-js/modules/es.object.get-own-property-descriptor.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/es.weak-map.js");
require("core-js/modules/esnext.weak-map.delete-all.js");
require("core-js/modules/esnext.weak-map.emplace.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FcrZonePhone = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
require("core-js/modules/es.array.map.js");
require("core-js/modules/es.number.constructor.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.regexp.exec.js");
require("core-js/modules/es.string.replace.js");
require("core-js/modules/es.string.trim.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.map.js");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
require("./index.css");
var _icon = require("../icon");
var _type = require("../icon/type");
var _useClickAnywhere = require("../../utilities/hooks/use-click-anywhere");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var FcrZonePhone = exports.FcrZonePhone = function FcrZonePhone(_ref) {
  var placeholder = _ref.placeholder,
    zoneOptions = _ref.zoneOptions,
    phoneOptions = _ref.phoneOptions,
    zoneDefault = _ref.zoneDefault,
    phoneDefault = _ref.phoneDefault,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'small' : _ref$size,
    styleType = _ref.styleType,
    _ref$onInputBlur = _ref.onInputBlur,
    onInputBlur = _ref$onInputBlur === void 0 ? function () {} : _ref$onInputBlur,
    _ref$onInputChange = _ref.onInputChange,
    onInputChange = _ref$onInputChange === void 0 ? function () {} : _ref$onInputChange,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    disabled = _ref.disabled,
    _ref$maxlength = _ref.maxlength,
    maxlength = _ref$maxlength === void 0 ? 11 : _ref$maxlength;
  var formatPhone = function formatPhone(val) {
    if (!val) return '';
    return val.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3').trim();
  };
  var restorePhone = function restorePhone(val) {
    return val.replace(/\s/g, '');
  };
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    zoneFocused = _useState2[0],
    setZoneFocused = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    inputIconFocused = _useState4[0],
    setInputIconFocused = _useState4[1];
  var _useState5 = (0, _react.useState)(zoneDefault || ''),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    zoneVal = _useState6[0],
    setZoneVal = _useState6[1];
  var _useState7 = (0, _react.useState)(formatPhone(phoneDefault || '')),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    phoneVal = _useState8[0],
    setPhoneVal = _useState8[1];
  var clickAnywhere = (0, _react.useCallback)(function () {
    setInputIconFocused(false);
    setZoneFocused(false);
  }, [setInputIconFocused, setZoneFocused]);
  var ref = (0, _useClickAnywhere.useClickAnywhere)(clickAnywhere);
  var wrapperCls = (0, _classnames["default"])('fcr-select-wrapper', {
    'fcr-select-wrapper-l': size === 'large',
    'fcr-select-wrapper-m': size === 'medium',
    'fcr-select-wrapper-s': size === 'small'
  });
  var cls = (0, _classnames["default"])('fcr-select-phone', (0, _defineProperty2["default"])({
    'fcr-select-phone--disabled': disabled,
    'fcr-select-phone-l': size === 'large',
    'fcr-select-phone-m': size === 'medium',
    'fcr-select-phone-s': size === 'small'
  }, "fcr-select-phone-".concat(styleType), !!styleType));
  var zoneCls = (0, _classnames["default"])('fcr-select-phone-zone', {
    'fcr-select-phone-zone--focused': zoneFocused
  });
  var optionsCls = (0, _classnames["default"])('fcr-select-phone__options', {
    'fcr-select-phone__options--invisible': !zoneFocused && !inputIconFocused
  });
  var inputCls = (0, _classnames["default"])('fcr-select-phone-input', {
    'fcr-select-phone-input--focused': inputIconFocused
  });
  var optionValCls = (0, _classnames["default"])({
    'fcr-select-phone__option-phone': inputIconFocused
  });
  var renderOptions = (0, _react.useMemo)(function () {
    return zoneFocused || inputIconFocused ? zoneFocused ? zoneOptions : phoneOptions : [];
  }, [zoneOptions, phoneOptions, zoneFocused, inputIconFocused]);
  var handleZoneClick = disabled ? function () {} : function () {
    setZoneFocused(!zoneFocused);
    setInputIconFocused(false);
  };
  var handleInputFocus = disabled ? function () {} : function () {
    setZoneFocused(false);
    setInputIconFocused(false);
  };
  var handleInputIconClick = disabled ? function () {} : function () {
    setInputIconFocused(!inputIconFocused);
    setZoneFocused(false);
  };
  var handleInputChange = function handleInputChange(e) {
    var inputval = e.target.value;
    if (maxlength && inputval.replace(/\s+/g, '').length > Number(maxlength)) return;
    setPhoneVal(formatPhone(inputval));
    onInputChange(e);
    onChange(zoneVal, restorePhone(inputval));
  };
  var handleBlur = function handleBlur(e) {
    onInputBlur(e);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: wrapperCls,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: cls,
      ref: ref,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: 'fcr-select-phone-top',
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: zoneCls,
          onClick: handleZoneClick,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            children: zoneVal
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
            className: "fcr-select-phone-zone__icon",
            colors: {
              iconPrimary: zoneFocused ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_icontext1)'
            },
            type: _type.FcrIconType.FCR_DROPDOWN,
            size: 24
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: inputCls,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
            value: phoneVal,
            placeholder: placeholder,
            onBlur: handleBlur,
            onChange: handleInputChange,
            onFocus: handleInputFocus
          }), phoneOptions && phoneOptions.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
            onClick: handleInputIconClick,
            className: "fcr-select-phone-input__icon",
            colors: {
              iconPrimary: inputIconFocused ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_icontext1)'
            },
            type: _type.FcrIconType.FCR_DROPDOWN,
            size: 24
          }) : null]
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
        className: optionsCls,
        children: renderOptions === null || renderOptions === void 0 ? void 0 : renderOptions.map(function (_ref2) {
          var text = _ref2.text,
            value = _ref2.value;
          var optionCls = (0, _classnames["default"])('fcr-select-phone__option', {
            'fcr-select-phone__option--active': zoneFocused ? zoneVal === value : phoneVal === formatPhone(value)
          });
          var handleClick = function handleClick() {
            if (zoneFocused && zoneVal !== value) {
              setZoneVal(value);
              onChange(value, phoneVal);
              setZoneFocused(false);
            } else if (inputIconFocused && phoneVal !== value) {
              setPhoneVal(formatPhone(value));
              onChange(zoneVal, value);
              setInputIconFocused(false);
            }
          };
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
            className: optionCls,
            onClick: handleClick,
            children: [zoneFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: "fcr-select-phone__option-zone",
              children: text
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: optionValCls,
              children: inputIconFocused ? formatPhone(value) : value
            })]
          }, value);
        })
      })]
    })
  });
};