import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.array.find.js";
import "core-js/modules/es.array.includes.js";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.string.includes.js";
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.filter.js";
import "core-js/modules/esnext.iterator.find.js";
import "core-js/modules/esnext.iterator.map.js";
import classNames from 'classnames';
import React, { useCallback, useEffect, useMemo, useState } 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 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 = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    focused = _useState2[0],
    setFocused = _useState2[1];
  var cls = classNames('fcr-select', _defineProperty(_defineProperty({
    '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 = classNames('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 = classNames('fcr-select__options', {
    'fcr-select__options--invisible': !focused
  });
  var clickAnywhere = useCallback(function () {
    setFocused(false);
  }, [setFocused]);
  var ref = useClickAnywhere(clickAnywhere);
  var _useMemo = 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 = useMemo(function () {
    return blurred && !focused ? 'var(--fcr_web_ui_scene_mainicon1)' : 'var(--fcr_ui_scene_icontext1)';
  }, [blurred, focused]);
  var selectedCls = classNames('fcr-select__selected', {
    'fcr-select__selected--unselected': isUnselected
  });
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    searchValue = _useState4[0],
    setSearchVal = _useState4[1];
  var handleSearchChange = function handleSearchChange(val) {
    setSearchVal(val);
  };
  var filteredOptions = 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 = useMemo(function () {
    return options === null || options === void 0 ? void 0 : options.find(function (ele) {
      return ele.value === value;
    });
  }, [options, value]);
  useEffect(function () {
    if (focused) {
      if (value) {
        setSearchVal('');
      }
    }
  }, [focused, value]);
  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]);
  useEffect(function () {
    handleSearchChange(option === null || option === void 0 ? void 0 : option.text);
  }, [option]);
  var valueDom = 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__*/_jsx("input", {
    disabled: disabled,
    onChange: function onChange(e) {
      handleSearchChange(e.target.value);
    },
    onClick: function onClick(e) {
      e.stopPropagation();
    },
    value: searchValue,
    placeholder: selectedText,
    className: classNames('fcr-select__search-input', {
      'fcr-select--disabled': disabled
    })
  }) : valueDom;
  var tagEle = tag && /*#__PURE__*/_jsx("span", {
    className: classNames('fcr-select__tag', {
      'fcr-select__tag--focused': focused
    }),
    children: tag
  });
  return /*#__PURE__*/_jsxs("div", {
    className: wrapperCls,
    children: [/*#__PURE__*/_jsxs("div", {
      className: cls,
      onClick: handleClick,
      ref: ref,
      children: [/*#__PURE__*/_jsxs("div", {
        className: selectedCls,
        children: [showSearch ? dom : /*#__PURE__*/_jsx("span", {
          children: selectedText
        }), /*#__PURE__*/_jsx(FcrIcon, {
          className: "fcr-select__icon",
          colors: {
            iconPrimary: arrowIconPrimaryColor
          },
          type: FcrIconType.FCR_DROPDOWN,
          size: 24
        })]
      }), !focused && tagEle, /*#__PURE__*/_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 = classNames('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__*/_jsx("li", {
            className: optionCls,
            onClick: handleClick,
            children: render ? render(option) : text
          }, ov);
        })
      })]
    }), focused && tagEle]
  });
};