"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.FcrSelect = void 0;
require("core-js/modules/es.array.filter.js");
require("core-js/modules/es.array.find.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.array.map.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.string.includes.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/esnext.iterator.find.js");
require("core-js/modules/esnext.iterator.map.js");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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 FcrSelect = exports.FcrSelect = function FcrSelect(_ref) {
  var placeholder = _ref.placeholder,
    options = _ref.options,
    value = _ref.value,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    styleType = _ref.styleType,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    disabled = _ref.disabled,
    blurred = _ref.blurred,
    className = _ref.className,
    _ref$showSearch = _ref.showSearch,
    showSearch = _ref$showSearch === void 0 ? false : _ref$showSearch,
    filterOption = _ref.filterOption,
    tag = _ref.tag;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    focused = _useState2[0],
    setFocused = _useState2[1];
  var cls = (0, _classnames["default"])('fcr-select', (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
    'fcr-select--focused': focused,
    'fcr-select--disabled': disabled,
    'fcr-select--blurred': blurred,
    'fcr-select-l': size === 'large',
    'fcr-select-m': size === 'medium',
    'fcr-select-s': size === 'small'
  }, "fcr-select-".concat(styleType), !!styleType), 'fcr-select--search', showSearch));
  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'
  }, className);
  var handleClick = disabled ? function () {} : function () {
    setFocused(!focused);
  };
  var optionsCls = (0, _classnames["default"])('fcr-select__options', {
    'fcr-select__options--invisible': !focused
  });
  var clickAnywhere = (0, _react.useCallback)(function () {
    setFocused(false);
  }, [setFocused]);
  var ref = (0, _useClickAnywhere.useClickAnywhere)(clickAnywhere);
  var _useMemo = (0, _react.useMemo)(function () {
      var _selectedOption$text;
      var selectedOption = options === null || options === void 0 ? void 0 : options.find(function (_ref2) {
        var ov = _ref2.value;
        return value === ov;
      });
      return {
        selectedText: (_selectedOption$text = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) !== null && _selectedOption$text !== void 0 ? _selectedOption$text : placeholder,
        isUnselected: !selectedOption
      };
    }, [value, options, placeholder]),
    isUnselected = _useMemo.isUnselected,
    selectedText = _useMemo.selectedText;
  var arrowIconPrimaryColor = (0, _react.useMemo)(function () {
    return blurred && !focused ? 'var(--fcr_web_ui_scene_mainicon1)' : 'var(--fcr_ui_scene_icontext1)';
  }, [blurred, focused]);
  var selectedCls = (0, _classnames["default"])('fcr-select__selected', {
    'fcr-select__selected--unselected': isUnselected
  });
  var _useState3 = (0, _react.useState)(),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    searchValue = _useState4[0],
    setSearchVal = _useState4[1];
  var handleSearchChange = function handleSearchChange(val) {
    setSearchVal(val);
  };
  var filteredOptions = (0, _react.useMemo)(function () {
    if (showSearch) {
      return options === null || options === void 0 ? void 0 : options.filter(function (ele) {
        if (filterOption instanceof Function) {
          return filterOption({
            value: searchValue,
            option: ele
          });
        } else {
          if (searchValue) {
            return ele.text.toLowerCase().includes(searchValue.toLowerCase());
          } else {
            return true;
          }
        }
      });
    } else {
      return options;
    }
  }, [options, filterOption, showSearch, searchValue]);
  var option = (0, _react.useMemo)(function () {
    return options === null || options === void 0 ? void 0 : options.find(function (ele) {
      return ele.value === value;
    });
  }, [options, value]);
  (0, _react.useEffect)(function () {
    if (focused) {
      if (value) {
        setSearchVal('');
      }
    }
  }, [focused, value]);
  (0, _react.useEffect)(function () {
    if (!focused) {
      if (searchValue !== (option === null || option === void 0 ? void 0 : option.text)) {
        setSearchVal(option === null || option === void 0 ? void 0 : option.text);
      }
    }
  }, [focused, option]);
  (0, _react.useEffect)(function () {
    handleSearchChange(option === null || option === void 0 ? void 0 : option.text);
  }, [option]);
  var valueDom = (0, _react.useMemo)(function () {
    var checkedOption = options === null || options === void 0 ? void 0 : options.find(function (ele) {
      return ele.value === value;
    });
    if (checkedOption) {
      if (checkedOption.valueRender) {
        return checkedOption.valueRender(checkedOption);
      }
    }
    return selectedText;
  }, [value, options, selectedText]);
  var dom = focused ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
    disabled: disabled,
    onChange: function onChange(e) {
      handleSearchChange(e.target.value);
    },
    onClick: function onClick(e) {
      e.stopPropagation();
    },
    value: searchValue,
    placeholder: selectedText,
    className: (0, _classnames["default"])('fcr-select__search-input', {
      'fcr-select--disabled': disabled
    })
  }) : valueDom;
  var tagEle = tag && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    className: (0, _classnames["default"])('fcr-select__tag', {
      'fcr-select__tag--focused': focused
    }),
    children: tag
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: wrapperCls,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: cls,
      onClick: handleClick,
      ref: ref,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: selectedCls,
        children: [showSearch ? dom : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: selectedText
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
          className: "fcr-select__icon",
          colors: {
            iconPrimary: arrowIconPrimaryColor
          },
          type: _type.FcrIconType.FCR_DROPDOWN,
          size: 24
        })]
      }), !focused && tagEle, /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
        className: optionsCls,
        children: filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function (option) {
          var text = option.text,
            ov = option.value,
            render = option.render,
            od = option.disabled;
          var optionCls = (0, _classnames["default"])('fcr-select__option', {
            'fcr-select__option--active': value === ov,
            'fcr-select__option--disabled': od
          });
          var handleClick = function handleClick(e) {
            if (od) {
              e.stopPropagation();
            }
            if (value !== ov && !od) {
              onChange(ov);
            }
          };
          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
            className: optionCls,
            onClick: handleClick,
            children: render ? render(option) : text
          }, ov);
        })
      })]
    }), focused && tagEle]
  });
};