const require_runtime = require("../../../../../../_virtual/_rolldown/runtime.js");
const require_index = require("../SelectHolderModal/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
//#region src/components/productCard/components/Time/components/SelectHolderMultiple/index.tsx
const SelectHolderMultiple = ({ lists, value, onChange, holderMode, isShowAddHolderButton, onAddHolder, addHolderButtonText, onClearHolder, isErrorHolder, allowClear = false, holderMaxCount }) => {
	const [selectedValue, setSelectedValue] = (0, react.useState)();
	const [open, setOpen] = (0, react.useState)(false);
	const [selectedHolderModalVisible, setSelectedHolderModalVisible] = (0, react.useState)(false);
	(0, react.useEffect)(() => {
		setSelectedValue(value);
	}, [value]);
	const isError = (0, react.useMemo)(() => {
		if (!isErrorHolder) return false;
		if (!selectedValue) return true;
		if ((0, _pisell_utils.isArr)(selectedValue) && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) !== holderMaxCount) return true;
		return false;
	}, [selectedValue, isErrorHolder]);
	const handleChange = (val) => {
		let item;
		if ((0, _pisell_utils.isArr)(val)) {
			if (val.length > holderMaxCount) return;
			item = lists.filter((d) => val.includes(d.id));
		} else item = lists.find((d) => d.id === val);
		setSelectedValue(val);
		onChange(item);
	};
	const optionsMap = (0, react.useMemo)(() => {
		return lists.reduce((acc, item) => {
			acc[item.id] = item;
			return acc;
		}, {});
	}, [lists]);
	console.log(optionsMap, value, "optionsMap");
	const handleClose = (item) => {
		console.log("item", item, value);
		handleChange(value.filter((d) => d !== item));
	};
	const renderHolder = () => {
		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, value.map((item) => {
			var _optionsMap$item;
			return /* @__PURE__ */ react.default.createElement(antd.Tag, {
				key: item,
				closable: true,
				onClose: () => handleClose(item),
				className: "select-holder-multiple-tag"
			}, (_optionsMap$item = optionsMap[item]) === null || _optionsMap$item === void 0 ? void 0 : _optionsMap$item.label);
		}), /* @__PURE__ */ react.default.createElement(antd.Button, {
			onClick: handleEdit,
			type: "text",
			className: "select-holder-multiple-edit-button"
		}, _pisell_utils.locales.getText("pisell2.product.card.edit")));
	};
	const handleEdit = (e) => {
		e.stopPropagation();
		setSelectedHolderModalVisible(true);
	};
	return /* @__PURE__ */ react.default.createElement("div", {
		className: `pisell-lowcode-product-card-select-holder ${isError ? "pisell-lowcode-product-card-select-holder-error" : ""}`,
		onClick: (e) => e.stopPropagation()
	}, (value === null || value === void 0 ? void 0 : value.length) ? /* @__PURE__ */ react.default.createElement("div", { className: "select-holder-multiple-wrap" }, renderHolder()) : /* @__PURE__ */ react.default.createElement(antd.Button, {
		type: "primary",
		block: true,
		onClick: handleEdit
	}, _pisell_utils.locales.getText("pisell2.product.card.add.holder.placeholder.multiple")(holderMaxCount, addHolderButtonText)), /* @__PURE__ */ react.default.createElement(require_index.default, {
		holderMaxCount,
		addHolderButtonText,
		lists,
		value: selectedValue,
		visible: selectedHolderModalVisible,
		onClose: () => setSelectedHolderModalVisible(false),
		onAdd: onAddHolder,
		onConfirm: handleChange
	}), isError ? /* @__PURE__ */ react.default.createElement("div", { className: "select-holder-error" }, `${_pisell_utils.locales.getText("pisell2.product.card.add.holder.modal.title.1")} `, /* @__PURE__ */ react.default.createElement("span", null, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", holderMaxCount), ` ${addHolderButtonText}`) : null);
};
//#endregion
exports.default = SelectHolderMultiple;
