import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useState, useContext, useMemo } from 'react';
import { SearchOutlined } from '@wii/icons';
import classNames from 'classnames';
import Select from '../select';
import Input from '../input';
import ConfigProvider from '../config-provider';
import FieldLabel from '../wau-field-label';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 如果有 label 就优先使用 label
 *
 * @param valueMap
 * @param v
 */
const getValueOrLabel = (valueMap, v) => {
  if (typeof v !== 'object') {
    return valueMap[v] || v;
  }
  return valueMap[v === null || v === void 0 ? void 0 : v.value] || v.label;
};
const LightSelect = (props, ref) => {
  const {
    label,
    prefixCls: customizePrefixCls,
    onChange,
    value,
    mode,
    size,
    showSearch,
    disabled,
    style,
    className,
    bordered,
    options,
    onSearch,
    allowClear,
    labelInValue,
    ...restProps
  } = props;
  const {
    placeholder = label
  } = props;
  const {
    getPrefixCls
  } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('pro-field-select-light-select');
  const [open, setOpen] = useState(false);
  const [keyword, setKeyword] = useState('');
  const valueMap = useMemo(() => {
    const values = {};
    options === null || options === void 0 ? void 0 : options.forEach(({
      label: aLabel,
      value: aValue
    }) => {
      values[aValue] = aLabel || aValue;
    });
    return values;
  }, [options]);
  const filterValue = Array.isArray(value) ? value.map(v => getValueOrLabel(valueMap, v)) : getValueOrLabel(valueMap, value);
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(prefixCls, {
      [`${prefixCls}-searchable`]: showSearch
    }, className),
    style: style,
    onClick: () => {
      if (!disabled) {
        setOpen(true);
      }
    },
    children: [/*#__PURE__*/_jsx(Select, {
      ...restProps,
      allowClear: allowClear,
      value: value,
      mode: mode,
      labelInValue: labelInValue,
      size: size,
      disabled: disabled,
      onChange: (v, option) => {
        if (onChange) {
          onChange(v, option);
        }
        if (mode !== 'multiple') {
          setTimeout(() => {
            setOpen(false);
          }, 0);
        }
      },
      bordered: bordered,
      showSearch: showSearch,
      onSearch: onSearch,
      style: style,
      dropdownRender: menuNode => {
        return /*#__PURE__*/_jsxs("div", {
          ref: ref,
          children: [showSearch && /*#__PURE__*/_jsx("div", {
            style: {
              margin: '4px 8px'
            },
            children: /*#__PURE__*/_jsx(Input, {
              value: keyword,
              allowClear: allowClear,
              onChange: e => {
                setKeyword(e.target.value.toLowerCase());
                onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
              },
              onKeyDown: e => {
                // 避免按下删除键把选项也删除了
                e.stopPropagation();
              },
              style: {
                width: '100%'
              },
              prefix: /*#__PURE__*/_jsx(SearchOutlined, {})
            })
          }), menuNode]
        });
      },
      open: open,
      onDropdownVisibleChange: setOpen,
      prefixCls: customizePrefixCls,
      options: keyword ? options === null || options === void 0 ? void 0 : options.filter(o => {
        var _o$value;
        return String(o.label).toLowerCase().includes(keyword) || ((_o$value = o.value) === null || _o$value === void 0 ? void 0 : _o$value.toString().toLowerCase().includes(keyword));
      }) : options
    }), /*#__PURE__*/_jsx(FieldLabel, {
      ellipsis: true,
      size: size,
      label: label,
      placeholder: placeholder,
      disabled: disabled,
      expanded: open,
      bordered: bordered,
      allowClear: allowClear,
      value: filterValue || (value === null || value === void 0 ? void 0 : value.label) || value,
      onClear: () => {
        onChange === null || onChange === void 0 ? void 0 : onChange(undefined, undefined);
      }
    })]
  });
};
export default /*#__PURE__*/React.forwardRef(LightSelect);