const require_runtime = require("../../../../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../../../pisellCard/index.js");
const require_index$1 = require("../../../../../iconfont/index.js");
const require_index$2 = require("../../../../../pisellModal/index.js");
const require_index$3 = require("../../../../../pisellCustomCheckboxGroup/index.js");
const require_index$4 = require("../../../../../pisellAvatar/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
require("./index.less");
//#region src/components/productCard/components/Time/components/SelectHolderModal/index.tsx
const SelectHolderModal = (props) => {
	const { lists, value, visible, holderMaxCount, addHolderButtonText, onClose, onAdd, onConfirm } = props;
	const [selectedValue, setSelectedValue] = (0, react.useState)([]);
	const renderItem = (item) => {
		return /* @__PURE__ */ react.default.createElement(require_index.default, {
			key: item.id,
			padding: 12,
			selected: selectedValue.includes(item.id)
		}, /* @__PURE__ */ react.default.createElement("div", { className: "select-holder-modal-card" }, /* @__PURE__ */ react.default.createElement(antd.Checkbox, { checked: selectedValue.includes(item.id) }), /* @__PURE__ */ react.default.createElement(require_index$4.default, {
			src: item.avatar,
			size: "lg",
			useTextAvatar: true,
			className: "select-holder-modal-add-item-avatar"
		}, /* @__PURE__ */ react.default.createElement("span", { className: "select-holder-name" }, item.label)), /* @__PURE__ */ react.default.createElement("span", { className: "select-holder-name" }, item.label)));
	};
	const handleConfirm = () => {
		onConfirm(selectedValue);
		onClose();
	};
	(0, react.useEffect)(() => {
		setSelectedValue(value || []);
	}, [value, visible]);
	const handleClick = (value) => {
		if (value.id === 0) {
			onAdd();
			return;
		}
		setSelectedValue((v) => {
			if (v.some((v) => v === value.id)) return v.filter((v) => v !== value.id);
			if (v.length >= holderMaxCount) return v;
			return [...v, value.id];
		});
	};
	const handleClear = () => {
		setSelectedValue([]);
	};
	const handleApply = () => {
		onConfirm(selectedValue);
		onClose();
	};
	const title = (0, react.useMemo)(() => {
		return /* @__PURE__ */ react.default.createElement("span", null, `${_pisell_utils.locales.getText("pisell2.product.card.add.holder.modal.title.1")} `, /* @__PURE__ */ react.default.createElement("span", { className: "select-holder-modal-title-count" }, (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) || 0, "/", holderMaxCount), ` ${addHolderButtonText}`);
	}, [
		selectedValue,
		holderMaxCount,
		addHolderButtonText
	]);
	const renderAddItem = (item) => {
		return /* @__PURE__ */ react.default.createElement(require_index.default, {
			key: item.id,
			padding: 12
		}, /* @__PURE__ */ react.default.createElement("div", { className: "select-holder-modal-card" }, /* @__PURE__ */ react.default.createElement(require_index$4.default, {
			src: item.avatar,
			size: "lg",
			useTextAvatar: true,
			className: "select-holder-modal-add-item-avatar",
			style: { backgroundColor: "var(--Pisell-, #EEE5FF)" }
		}, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
			type: "pisell2-plus",
			style: { fontSize: "24px" }
		})), /* @__PURE__ */ react.default.createElement("span", { className: "select-holder-name" }, _pisell_utils.locales.getText("pisell2.product.card.add.holder.modal.add"))));
	};
	return /* @__PURE__ */ react.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ react.default.createElement(require_index$2.default, {
		open: visible,
		onCancel: onClose,
		onOk: handleConfirm,
		width: 780,
		footer: null,
		title,
		headerDivider: false
	}, /* @__PURE__ */ react.default.createElement("div", { className: "select-holder-modal-content" }, /* @__PURE__ */ react.default.createElement(require_index$3.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__ */ react.default.createElement("div", { className: "select-holder-modal-footer" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(antd.Button, {
		size: "large",
		onClick: onClose,
		className: "select-holder-modal-cancel-button"
	}, _pisell_utils.locales.getText("pisell2.product.card.add.holder.modal.cancel"))), /* @__PURE__ */ react.default.createElement("div", { className: "select-holder-modal-footer-right" }, /* @__PURE__ */ react.default.createElement(antd.Button, {
		size: "large",
		onClick: handleClear,
		className: "select-holder-modal-clear-button"
	}, _pisell_utils.locales.getText("pisell2.product.card.add.holder.modal.clear")), /* @__PURE__ */ react.default.createElement(antd.Button, {
		size: "large",
		type: "primary",
		onClick: handleApply,
		className: "select-holder-modal-apply-button"
	}, _pisell_utils.locales.getText("pisell2.product.card.add.holder.modal.apply")))))));
};
//#endregion
exports.default = SelectHolderModal;
