import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.number.constructor.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.string.replace.js";
import "core-js/modules/es.string.trim.js";
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.map.js";
import classNames from 'classnames';
import React, { useMemo, useState, useCallback } from 'react';
import './index.css';
import { FcrIcon } from '../icon';
import { FcrIconType } from '../icon/type';
import { useClickAnywhere } from '../../utilities/hooks/use-click-anywhere';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var 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 = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    zoneFocused = _useState2[0],
    setZoneFocused = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    inputIconFocused = _useState4[0],
    setInputIconFocused = _useState4[1];
  var _useState5 = useState(zoneDefault || ''),
    _useState6 = _slicedToArray(_useState5, 2),
    zoneVal = _useState6[0],
    setZoneVal = _useState6[1];
  var _useState7 = useState(formatPhone(phoneDefault || '')),
    _useState8 = _slicedToArray(_useState7, 2),
    phoneVal = _useState8[0],
    setPhoneVal = _useState8[1];
  var clickAnywhere = useCallback(function () {
    setInputIconFocused(false);
    setZoneFocused(false);
  }, [setInputIconFocused, setZoneFocused]);
  var ref = useClickAnywhere(clickAnywhere);
  var wrapperCls = classNames('fcr-select-wrapper', {
    'fcr-select-wrapper-l': size === 'large',
    'fcr-select-wrapper-m': size === 'medium',
    'fcr-select-wrapper-s': size === 'small'
  });
  var cls = classNames('fcr-select-phone', _defineProperty({
    '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 = classNames('fcr-select-phone-zone', {
    'fcr-select-phone-zone--focused': zoneFocused
  });
  var optionsCls = classNames('fcr-select-phone__options', {
    'fcr-select-phone__options--invisible': !zoneFocused && !inputIconFocused
  });
  var inputCls = classNames('fcr-select-phone-input', {
    'fcr-select-phone-input--focused': inputIconFocused
  });
  var optionValCls = classNames({
    'fcr-select-phone__option-phone': inputIconFocused
  });
  var renderOptions = 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__*/_jsx("div", {
    className: wrapperCls,
    children: /*#__PURE__*/_jsxs("div", {
      className: cls,
      ref: ref,
      children: [/*#__PURE__*/_jsxs("div", {
        className: 'fcr-select-phone-top',
        children: [/*#__PURE__*/_jsxs("div", {
          className: zoneCls,
          onClick: handleZoneClick,
          children: [/*#__PURE__*/_jsx("span", {
            children: zoneVal
          }), /*#__PURE__*/_jsx(FcrIcon, {
            className: "fcr-select-phone-zone__icon",
            colors: {
              iconPrimary: zoneFocused ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_icontext1)'
            },
            type: FcrIconType.FCR_DROPDOWN,
            size: 24
          })]
        }), /*#__PURE__*/_jsxs("div", {
          className: inputCls,
          children: [/*#__PURE__*/_jsx("input", {
            value: phoneVal,
            placeholder: placeholder,
            onBlur: handleBlur,
            onChange: handleInputChange,
            onFocus: handleInputFocus
          }), phoneOptions && phoneOptions.length > 1 ? /*#__PURE__*/_jsx(FcrIcon, {
            onClick: handleInputIconClick,
            className: "fcr-select-phone-input__icon",
            colors: {
              iconPrimary: inputIconFocused ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_icontext1)'
            },
            type: FcrIconType.FCR_DROPDOWN,
            size: 24
          }) : null]
        })]
      }), /*#__PURE__*/_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 = classNames('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__*/_jsxs("li", {
            className: optionCls,
            onClick: handleClick,
            children: [zoneFocused && /*#__PURE__*/_jsx("span", {
              className: "fcr-select-phone__option-zone",
              children: text
            }), /*#__PURE__*/_jsx("span", {
              className: optionValCls,
              children: inputIconFocused ? formatPhone(value) : value
            })]
          }, value);
        })
      })]
    })
  });
};