import SelectHolderModal from "../SelectHolderModal/index.js";
import React, { useEffect, useMemo, useState } from "react";
import { isArr, locales } from "@pisell/utils";
import { Button, Tag } from "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] = useState();
	const [open, setOpen] = useState(false);
	const [selectedHolderModalVisible, setSelectedHolderModalVisible] = useState(false);
	useEffect(() => {
		setSelectedValue(value);
	}, [value]);
	const isError = useMemo(() => {
		if (!isErrorHolder) return false;
		if (!selectedValue) return true;
		if (isArr(selectedValue) && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) !== holderMaxCount) return true;
		return false;
	}, [selectedValue, isErrorHolder]);
	const handleChange = (val) => {
		let item;
		if (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 = 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.createElement(React.Fragment, null, value.map((item) => {
			var _optionsMap$item;
			return /* @__PURE__ */ React.createElement(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.createElement(Button, {
			onClick: handleEdit,
			type: "text",
			className: "select-holder-multiple-edit-button"
		}, locales.getText("pisell2.product.card.edit")));
	};
	const handleEdit = (e) => {
		e.stopPropagation();
		setSelectedHolderModalVisible(true);
	};
	return /* @__PURE__ */ React.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.createElement("div", { className: "select-holder-multiple-wrap" }, renderHolder()) : /* @__PURE__ */ React.createElement(Button, {
		type: "primary",
		block: true,
		onClick: handleEdit
	}, locales.getText("pisell2.product.card.add.holder.placeholder.multiple")(holderMaxCount, addHolderButtonText)), /* @__PURE__ */ React.createElement(SelectHolderModal, {
		holderMaxCount,
		addHolderButtonText,
		lists,
		value: selectedValue,
		visible: selectedHolderModalVisible,
		onClose: () => setSelectedHolderModalVisible(false),
		onAdd: onAddHolder,
		onConfirm: handleChange
	}), isError ? /* @__PURE__ */ React.createElement("div", { className: "select-holder-error" }, `${locales.getText("pisell2.product.card.add.holder.modal.title.1")} `, /* @__PURE__ */ React.createElement("span", null, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", holderMaxCount), ` ${addHolderButtonText}`) : null);
};
//#endregion
export { SelectHolderMultiple as default };
