import React__default, { useRef, useContext, useState, useEffect, useImperativeHandle } from "react";
import { pickDataAttributes } from "../_util/pick.js";
import { isObject, isFunction, isUndefined } from "../_util/is.js";
import cs from "../_util/classNames.js";
import { ConfigContext } from "../ConfigProvider/index.js";
import IconDown from "../../icon/react-icon/IconDown/index.js";
import IconLoading from "../../icon/react-icon/IconLoading/index.js";
import IconClose from "../../icon/react-icon/IconClose/index.js";
import IconSearch from "../../icon/react-icon/IconSearch/index.js";
import InputTag from "../InputTag/input-tag.js";
import InputComponent from "../Input/input-element.js";
import include from "../_util/include.js";
import useForceUpdate from "../_util/hooks/useForceUpdate.js";
import IconHover from "./icon-hover.js";
import { Enter, Backspace } from "../_util/keycode.js";
import { jsx, jsxs, Fragment } from "../../../../../../@emotion_react@11.10.4_3toe27fv7etiytxb5kxc7fxaw4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
var __assign = globalThis && globalThis.__assign || function() {
  __assign = Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s)
        if (Object.prototype.hasOwnProperty.call(s, p))
          t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = globalThis && globalThis.__rest || function(s, e) {
  var t = {};
  for (var p in s)
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
      t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function")
    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
        t[p[i]] = s[p[i]];
    }
  return t;
};
var __read = globalThis && globalThis.__read || function(o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m)
    return o;
  var i = m.call(o), r, ar = [], e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
      ar.push(r.value);
  } catch (error) {
    e = {
      error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"]))
        m.call(i);
    } finally {
      if (e)
        throw e.error;
    }
  }
  return ar;
};
var SearchStatus = {
  BEFORE: 0,
  EDITING: 1,
  NONE: 2
};
var SelectView = function(props, ref) {
  var _a, _b;
  var style = props.style, className = props.className, size = props.size, bordered = props.bordered, allowClear = props.allowClear, allowCreate = props.allowCreate, error = props.error, loading = props.loading, disabled = props.disabled, animation = props.animation, prefixCls = props.prefixCls, suffixIcon = props.suffixIcon, arrowIcon = props.arrowIcon, removeIcon = props.removeIcon, clearIcon = props.clearIcon, placeholder = props.placeholder, renderText = props.renderText, value = props.value, inputValue = props.inputValue, popupVisible = props.popupVisible, maxTagCount = props.maxTagCount, isMultiple = props.isMultiple, isEmptyValue = props.isEmptyValue, prefix = props.prefix, ariaControls = props.ariaControls, renderTag = props.renderTag, dragToSort = props.dragToSort, onKeyDown = props.onKeyDown, onChangeInputValue = props.onChangeInputValue, onPaste = props.onPaste, onClear = props.onClear, onFocus = props.onFocus, onBlur = props.onBlur, onRemoveCheckedItem = props.onRemoveCheckedItem, onSort = props.onSort, rtl = props.rtl, rest = __rest(props, ["style", "className", "size", "bordered", "allowClear", "allowCreate", "error", "loading", "disabled", "animation", "prefixCls", "suffixIcon", "arrowIcon", "removeIcon", "clearIcon", "placeholder", "renderText", "value", "inputValue", "popupVisible", "maxTagCount", "isMultiple", "isEmptyValue", "prefix", "ariaControls", "renderTag", "dragToSort", "onKeyDown", "onChangeInputValue", "onPaste", "onClear", "onFocus", "onBlur", "onRemoveCheckedItem", "onSort", "rtl"]);
  var refInput = useRef(null);
  var refWrapper = useRef(null);
  var _c = useContext(ConfigContext), ctxSize = _c.size, getPrefixCls = _c.getPrefixCls;
  var _d = __read(useState(SearchStatus.NONE), 2), searchStatus = _d[0], setSearchStatus = _d[1];
  var _e = __read(useState(false), 2), focused = _e[0], setFocused = _e[1];
  var forceUpdate = useForceUpdate();
  var showSearch = "showSearch" in props ? props.showSearch : isMultiple;
  var canFocusInput = showSearch || allowCreate;
  var mergedSize = size || ctxSize;
  var mergedFocused = focused || popupVisible;
  var isRetainInputValueSearch = isObject(showSearch) && showSearch.retainInputValue;
  var renderedValue = !isMultiple && value !== void 0 ? renderText(value).text : "";
  var keepFocus = function(event) {
    event && event.preventDefault();
  };
  var handleFocus = function(action) {
    var element = canFocusInput ? refInput.current : refWrapper.current;
    if (element) {
      action === "focus" ? element.focus() : element.blur();
    }
  };
  var tryTriggerFocusChange = function(action, event) {
    if (canFocusInput && event.target === refWrapper.current) {
      return;
    }
    if (action === "focus") {
      setFocused(true);
      onFocus && onFocus(event);
    } else {
      setFocused(false);
      onBlur && onBlur(event);
    }
  };
  var tryTriggerKeyDown = function(event) {
    if (canFocusInput && event.currentTarget === refWrapper.current) {
      return;
    }
    var keyCode = event.keyCode || event.which;
    if (keyCode === Enter.code) {
      event.preventDefault();
    }
    onKeyDown && onKeyDown(event);
  };
  useEffect(function() {
    handleFocus(popupVisible ? "focus" : "blur");
    if (canFocusInput) {
      setSearchStatus(popupVisible ? SearchStatus.BEFORE : SearchStatus.NONE);
    }
  }, [popupVisible]);
  useImperativeHandle(ref, function() {
    return {
      dom: refWrapper.current,
      focus: handleFocus.bind(null, "focus"),
      blur: handleFocus.bind(null, "blur"),
      getWidth: function() {
        return refWrapper.current && refWrapper.current.clientWidth;
      }
    };
  });
  var mergedArrowIcon = "arrowIcon" in props ? arrowIcon === null ? null : /* @__PURE__ */ jsx("div", {
    className: prefixCls + "-arrow-icon",
    children: arrowIcon
  }) : /* @__PURE__ */ jsx("div", {
    className: prefixCls + "-arrow-icon",
    children: /* @__PURE__ */ jsx(IconDown, {})
  });
  var mergedSuffixIcon = loading ? /* @__PURE__ */ jsx("span", {
    className: prefixCls + "-loading-icon",
    children: /* @__PURE__ */ jsx(IconLoading, {})
  }) : suffixIcon ? /* @__PURE__ */ jsx("span", {
    className: prefixCls + "-suffix-icon",
    children: suffixIcon
  }) : props.showSearch && popupVisible ? /* @__PURE__ */ jsx("div", {
    className: prefixCls + "-search-icon",
    children: /* @__PURE__ */ jsx(IconSearch, {})
  }) : mergedArrowIcon;
  var inputEventHandlers = {
    paste: onPaste,
    keyDown: tryTriggerKeyDown,
    focus: function(event) {
      event.stopPropagation();
      tryTriggerFocusChange("focus", event);
    },
    blur: function(event) {
      event.stopPropagation();
      tryTriggerFocusChange("blur", event);
    },
    change: function(newValue, event) {
      setSearchStatus(SearchStatus.EDITING);
      onChangeInputValue && onChangeInputValue(newValue, event);
    }
  };
  var renderSingle = function() {
    var _a2, _b2;
    var _inputValue;
    switch (searchStatus) {
      case SearchStatus.BEFORE:
        _inputValue = inputValue || (isRetainInputValueSearch ? renderedValue : "");
        break;
      case SearchStatus.EDITING:
        _inputValue = inputValue || "";
        break;
      default:
        _inputValue = renderedValue;
        break;
    }
    var inputProps = {
      style: {
        width: "100%"
      },
      value: typeof _inputValue !== "object" ? _inputValue : "",
      placeholder: canFocusInput && renderedValue && typeof renderedValue !== "object" ? renderedValue : placeholder
    };
    if (canFocusInput) {
      inputProps.onPaste = inputEventHandlers.paste;
      inputProps.onKeyDown = inputEventHandlers.keyDown;
      inputProps.onFocus = inputEventHandlers.focus;
      inputProps.onBlur = inputEventHandlers.blur;
      inputProps.onChange = inputEventHandlers.change;
    } else {
      inputProps.tabIndex = -1;
      inputProps.style.pointerEvents = "none";
    }
    var needShowInput = !!(mergedFocused && canFocusInput || isEmptyValue);
    return /* @__PURE__ */ jsxs(Fragment, {
      children: [/* @__PURE__ */ jsx(InputComponent, {
        ...__assign({
          "aria-hidden": !needShowInput || void 0,
          ref: refInput,
          disabled,
          className: cs(prefixCls + "-view-input", (_a2 = {}, _a2[prefixCls + "-hidden"] = !needShowInput, _a2)),
          autoComplete: "off"
        }, inputProps)
      }), /* @__PURE__ */ jsx("span", {
        "aria-hidden": needShowInput || void 0,
        className: cs(prefixCls + "-view-value", (_b2 = {}, _b2[prefixCls + "-hidden"] = needShowInput, _b2)),
        children: _inputValue
      })]
    });
  };
  var renderMultiple = function() {
    var usedValue = isUndefined(value) ? [] : [].concat(value);
    var maxTagCountNumber = isObject(maxTagCount) ? maxTagCount.count : maxTagCount;
    var maxTagCountRender = isObject(maxTagCount) && isFunction(maxTagCount.render) ? maxTagCount.render : function(invisibleCount) {
      return "+" + invisibleCount + "...";
    };
    var usedMaxTagCount = typeof maxTagCountNumber === "number" ? Math.max(maxTagCountNumber, 0) : usedValue.length;
    var tagsToShow = [];
    var lastClosableTagIndex = -1;
    for (var i = usedValue.length - 1; i >= 0; i--) {
      var v = usedValue[i];
      var result = renderText(v);
      if (i < usedMaxTagCount) {
        tagsToShow.unshift({
          value: v,
          label: result.text,
          closable: !result.disabled
        });
      }
      if (!result.disabled && lastClosableTagIndex === -1) {
        lastClosableTagIndex = i;
      }
    }
    var invisibleTagCount = usedValue.length - usedMaxTagCount;
    if (invisibleTagCount > 0) {
      tagsToShow.push({
        label: maxTagCountRender(invisibleTagCount),
        closable: false,
        value: "__arco_value_tag_placeholder"
      });
    }
    var eventHandlers = {
      onPaste: inputEventHandlers.paste,
      onKeyDown: inputEventHandlers.keyDown,
      onFocus: inputEventHandlers.focus,
      onBlur: inputEventHandlers.blur,
      onInputChange: inputEventHandlers.change,
      onRemove: function(value2, index, event) {
        var keyCode = event.keyCode || event.which;
        if (keyCode === Backspace.code && lastClosableTagIndex > -1) {
          value2 = usedValue[lastClosableTagIndex];
          index = lastClosableTagIndex;
        }
        maxTagCount && forceUpdate();
        onRemoveCheckedItem && onRemoveCheckedItem(value2, index, event);
      }
    };
    return /* @__PURE__ */ jsx(InputTag, {
      ...__assign({
        className: mergedFocused ? getPrefixCls("input-tag") + "-focus" : "",
        ref: refInput,
        disabled,
        dragToSort,
        disableInput: !showSearch,
        animation,
        placeholder,
        value: tagsToShow,
        inputValue,
        size: mergedSize,
        tagClassName: prefixCls + "-tag",
        renderTag,
        icon: {
          removeIcon
        },
        onChange: function(value2, reason) {
          if (onSort && reason === "sort") {
            onSort(value2);
          }
        }
      }, eventHandlers)
    });
  };
  var classNames = cs(prefixCls, prefixCls + "-" + (isMultiple ? "multiple" : "single"), (_a = {}, _a[prefixCls + "-show-search"] = showSearch, _a[prefixCls + "-open"] = popupVisible, _a[prefixCls + "-size-" + mergedSize] = mergedSize, _a[prefixCls + "-focused"] = mergedFocused, _a[prefixCls + "-error"] = error, _a[prefixCls + "-disabled"] = disabled, _a[prefixCls + "-no-border"] = !bordered, _a[prefixCls + "-rtl"] = rtl, _a), className);
  var mergedClearIcon = !disabled && !isEmptyValue && allowClear ? /* @__PURE__ */ jsx(IconHover, {
    size: mergedSize,
    className: prefixCls + "-clear-icon",
    onClick: onClear,
    onMouseDown: keepFocus,
    children: clearIcon !== void 0 && clearIcon !== null ? clearIcon : /* @__PURE__ */ jsx(IconClose, {})
  }, "clearIcon") : null;
  return /* @__PURE__ */ jsx("div", {
    ...__assign({
      role: "combobox",
      "aria-haspopup": "listbox",
      "aria-autocomplete": "list",
      "aria-expanded": popupVisible,
      "aria-disabled": disabled,
      "aria-controls": ariaControls
    }, include(rest, ["onClick", "onMouseEnter", "onMouseLeave"]), pickDataAttributes(rest), {
      ref: refWrapper,
      tabIndex: disabled ? -1 : 0,
      style,
      className: classNames,
      onKeyDown: tryTriggerKeyDown,
      onFocus: function(event) {
        if (!disabled && !dragToSort) {
          if (canFocusInput) {
            refInput.current && refInput.current.focus();
          } else {
            tryTriggerFocusChange("focus", event);
          }
        }
      },
      onBlur: function(event) {
        return tryTriggerFocusChange("blur", event);
      }
    }),
    children: /* @__PURE__ */ jsxs("div", {
      title: typeof renderedValue === "string" ? renderedValue : void 0,
      className: cs(prefixCls + "-view", (_b = {}, _b[prefixCls + "-view-with-prefix"] = prefix, _b)),
      onClick: function(e) {
        return popupVisible && canFocusInput && e.stopPropagation();
      },
      children: [prefix && /* @__PURE__ */ jsx("div", {
        "aria-hidden": "true",
        className: cs(prefixCls + "-prefix"),
        onMouseDown: function(event) {
          return focused && keepFocus(event);
        },
        children: prefix
      }), isMultiple ? renderMultiple() : renderSingle(), /* @__PURE__ */ jsxs("div", {
        "aria-hidden": "true",
        className: prefixCls + "-suffix",
        onMouseDown: function(event) {
          return focused && keepFocus(event);
        },
        children: [mergedClearIcon, mergedSuffixIcon]
      })]
    })
  });
};
var SelectViewComponent = React__default.forwardRef(SelectView);
SelectViewComponent.displayName = "SelectView";
const SelectView$1 = SelectViewComponent;
export {
  SelectView,
  SelectView$1 as default
};
//# sourceMappingURL=select-view.js.map
