var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/pisellMultipleSelect/components/EditView.tsx
var EditView_exports = {};
__export(EditView_exports, {
  default: () => EditView_default
});
module.exports = __toCommonJS(EditView_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_icons = require("@ant-design/icons");
var import_classnames = __toESM(require("classnames"));
var import_utils = require("@pisell/utils");
var EditView = (0, import_react.forwardRef)((props, ref) => {
  const {
    value = [],
    options,
    label,
    helperText,
    error,
    errorText,
    required,
    placeholder = "请选择",
    showSearch = false,
    allowClear = false,
    maxTagCount = 3,
    showTooltipOnOverflow = true,
    size = "middle",
    className,
    style,
    onSearch,
    filterOption,
    onChangeInternal,
    ...restProps
  } = props;
  const antdOptions = (0, import_react.useMemo)(
    () => options.map((opt) => ({
      label: opt.label,
      value: opt.value,
      disabled: opt.disabled
    })),
    [options]
  );
  const [searchKeyword, setSearchKeyword] = (0, import_react.useState)("");
  const [, setSearchInput] = (0, import_utils.useDebouncedSearch)("", 300, (text) => {
    onSearch == null ? void 0 : onSearch(text);
  });
  const handleSearchInput = (e) => {
    const text = e.target.value;
    setSearchKeyword(text);
    setSearchInput(text);
  };
  const filteredAntdOptions = (0, import_react.useMemo)(() => {
    if (!showSearch || !searchKeyword) return antdOptions;
    if (filterOption) {
      return antdOptions.filter((opt) => {
        const selectOption = options.find((o) => o.value === opt.value);
        return selectOption ? filterOption(searchKeyword, selectOption) : false;
      });
    }
    return antdOptions.filter(
      (opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase())
    );
  }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
  const wrapperRef = (0, import_react.useRef)(null);
  const menuItemSelectedIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, { style: { color: "#7F56D9", fontSize: 16 } });
  const dropdownRender = (0, import_react.useCallback)(
    (menu) => {
      if (!showSearch) return menu;
      return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-select-search-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
        import_antd.Input,
        {
          placeholder: "Search",
          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { style: { color: "#98A2B3", fontSize: 16 } }),
          value: searchKeyword,
          onChange: handleSearchInput,
          className: "pisell-select-search-input",
          bordered: false,
          autoFocus: true
        }
      )), menu);
    },
    [showSearch, searchKeyword, handleSearchInput]
  );
  const maxTagPlaceholder = (0, import_react.useCallback)(
    (omittedValues) => {
      if (!showTooltipOnOverflow) {
        return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-more-tag" }, "+", omittedValues.length);
      }
      const tooltipContent = omittedValues.map((v) => {
        var _a;
        return (_a = options.find((opt) => opt.value === v.value)) == null ? void 0 : _a.label;
      }).filter(Boolean).join(", ");
      return /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tooltipContent }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-more-tag" }, "+", omittedValues.length));
    },
    [options, showTooltipOnOverflow]
  );
  return /* @__PURE__ */ import_react.default.createElement("div", { ref: wrapperRef, className: (0, import_classnames.default)("pisell-multiple-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
    "label",
    {
      className: (0, import_classnames.default)("pisell-multiple-select-label", {
        "pisell-multiple-select-label-required": required
      })
    },
    label
  ), /* @__PURE__ */ import_react.default.createElement(
    import_antd.Select,
    {
      ...restProps,
      ref,
      mode: "multiple",
      value,
      options: filteredAntdOptions,
      placeholder,
      showSearch: false,
      allowClear,
      menuItemSelectedIcon,
      dropdownRender,
      onChange: onChangeInternal,
      maxTagCount,
      maxTagPlaceholder,
      size,
      popupClassName: "pisell-multiple-select-dropdown",
      getPopupContainer: () => wrapperRef.current ?? document.body,
      className: (0, import_classnames.default)("pisell-multiple-select", {
        "pisell-multiple-select-error": error
      })
    }
  ), helperText && !error && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-multiple-select-helper-text" }, helperText), error && errorText && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-multiple-select-error-text" }, errorText));
});
EditView.displayName = "PisellMultipleSelectEditView";
var EditView_default = EditView;
