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/productCard/components/Time/components/SelectHolderModal/index.tsx
var SelectHolderModal_exports = {};
__export(SelectHolderModal_exports, {
  default: () => SelectHolderModal_default
});
module.exports = __toCommonJS(SelectHolderModal_exports);
var import_react = __toESM(require("react"));
var import_utils = require("@pisell/utils");
var import_pisellModal = __toESM(require("../../../../../pisellModal"));
var import_pisellCustomCheckboxGroup = __toESM(require("../../../../../pisellCustomCheckboxGroup"));
var import_pisellCard = __toESM(require("../../../../../pisellCard"));
var import_pisellAvatar = __toESM(require("../../../../../pisellAvatar"));
var import_antd = require("antd");
var import_iconfont = __toESM(require("../../../../../iconfont"));
var import_index = require("./index.less");
var SelectHolderModal = (props) => {
  const {
    lists,
    value,
    visible,
    holderMaxCount,
    addHolderButtonText,
    onClose,
    onAdd,
    onConfirm
  } = props;
  const [selectedValue, setSelectedValue] = (0, import_react.useState)([]);
  const renderItem = (item) => {
    return /* @__PURE__ */ import_react.default.createElement(
      import_pisellCard.default,
      {
        key: item.id,
        padding: 12,
        selected: selectedValue.includes(item.id)
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: "select-holder-modal-card" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Checkbox, { checked: selectedValue.includes(item.id) }), /* @__PURE__ */ import_react.default.createElement(
        import_pisellAvatar.default,
        {
          src: item.avatar,
          size: "lg",
          useTextAvatar: true,
          className: "select-holder-modal-add-item-avatar"
        },
        /* @__PURE__ */ import_react.default.createElement("span", { className: "select-holder-name" }, item.label)
      ), /* @__PURE__ */ import_react.default.createElement("span", { className: "select-holder-name" }, item.label))
    );
  };
  const handleConfirm = () => {
    onConfirm(selectedValue);
    onClose();
  };
  (0, import_react.useEffect)(() => {
    setSelectedValue(value || []);
  }, [value, visible]);
  const handleClick = (value2) => {
    if (value2.id === 0) {
      onAdd();
      return;
    }
    setSelectedValue((v) => {
      if (v.some((v2) => v2 === value2.id)) {
        return v.filter((v2) => v2 !== value2.id);
      }
      if (v.length >= holderMaxCount) {
        return v;
      }
      return [...v, value2.id];
    });
  };
  const handleClear = () => {
    setSelectedValue([]);
  };
  const handleApply = () => {
    onConfirm(selectedValue);
    onClose();
  };
  const title = (0, import_react.useMemo)(() => {
    return /* @__PURE__ */ import_react.default.createElement("span", null, `${import_utils.locales.getText("pisell2.product.card.add.holder.modal.title.1")} `, /* @__PURE__ */ import_react.default.createElement("span", { className: "select-holder-modal-title-count" }, (selectedValue == null ? void 0 : selectedValue.length) || 0, "/", holderMaxCount), ` ${addHolderButtonText}`);
  }, [selectedValue, holderMaxCount, addHolderButtonText]);
  const renderAddItem = (item) => {
    return /* @__PURE__ */ import_react.default.createElement(import_pisellCard.default, { key: item.id, padding: 12 }, /* @__PURE__ */ import_react.default.createElement("div", { className: "select-holder-modal-card" }, /* @__PURE__ */ import_react.default.createElement(
      import_pisellAvatar.default,
      {
        src: item.avatar,
        size: "lg",
        useTextAvatar: true,
        className: "select-holder-modal-add-item-avatar",
        style: { backgroundColor: "var(--Pisell-, #EEE5FF)" }
      },
      /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-plus", style: { fontSize: "24px" } })
    ), /* @__PURE__ */ import_react.default.createElement("span", { className: "select-holder-name" }, import_utils.locales.getText("pisell2.product.card.add.holder.modal.add"))));
  };
  return /* @__PURE__ */ import_react.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement(
    import_pisellModal.default,
    {
      open: visible,
      onCancel: onClose,
      onOk: handleConfirm,
      width: 780,
      footer: null,
      title,
      headerDivider: false
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "select-holder-modal-content" }, /* @__PURE__ */ import_react.default.createElement(
      import_pisellCustomCheckboxGroup.default,
      {
        className: "select-holder-modal-checkbox-group",
        allowAdd: true,
        dataSource: lists,
        renderItem,
        renderAddItem,
        value: selectedValue,
        isMultiple: true,
        columns: 3,
        horizontalGap: 16,
        verticalGap: 16,
        onClick: handleClick
      }
    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "select-holder-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        size: "large",
        onClick: onClose,
        className: "select-holder-modal-cancel-button"
      },
      import_utils.locales.getText(
        "pisell2.product.card.add.holder.modal.cancel"
      )
    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "select-holder-modal-footer-right" }, /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        size: "large",
        onClick: handleClear,
        className: "select-holder-modal-clear-button"
      },
      import_utils.locales.getText("pisell2.product.card.add.holder.modal.clear")
    ), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        size: "large",
        type: "primary",
        onClick: handleApply,
        className: "select-holder-modal-apply-button"
      },
      import_utils.locales.getText("pisell2.product.card.add.holder.modal.apply")
    ))))
  ));
};
var SelectHolderModal_default = SelectHolderModal;
