import PisellCard from "../../../../../pisellCard/index.js";
import IconFont from "../../../../../iconfont/index.js";
import PisellModal from "../../../../../pisellModal/index.js";
import PisellCustomCheckboxGroup from "../../../../../pisellCustomCheckboxGroup/index.js";
import PisellAvatar from "../../../../../pisellAvatar/index.js";
import React, { useEffect, useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import { Button, Checkbox } from "antd";
import "./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] = useState([]);
	const renderItem = (item) => {
		return /* @__PURE__ */ React.createElement(PisellCard, {
			key: item.id,
			padding: 12,
			selected: selectedValue.includes(item.id)
		}, /* @__PURE__ */ React.createElement("div", { className: "select-holder-modal-card" }, /* @__PURE__ */ React.createElement(Checkbox, { checked: selectedValue.includes(item.id) }), /* @__PURE__ */ React.createElement(PisellAvatar, {
			src: item.avatar,
			size: "lg",
			useTextAvatar: true,
			className: "select-holder-modal-add-item-avatar"
		}, /* @__PURE__ */ React.createElement("span", { className: "select-holder-name" }, item.label)), /* @__PURE__ */ React.createElement("span", { className: "select-holder-name" }, item.label)));
	};
	const handleConfirm = () => {
		onConfirm(selectedValue);
		onClose();
	};
	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 = useMemo(() => {
		return /* @__PURE__ */ React.createElement("span", null, `${locales.getText("pisell2.product.card.add.holder.modal.title.1")} `, /* @__PURE__ */ React.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.createElement(PisellCard, {
			key: item.id,
			padding: 12
		}, /* @__PURE__ */ React.createElement("div", { className: "select-holder-modal-card" }, /* @__PURE__ */ React.createElement(PisellAvatar, {
			src: item.avatar,
			size: "lg",
			useTextAvatar: true,
			className: "select-holder-modal-add-item-avatar",
			style: { backgroundColor: "var(--Pisell-, #EEE5FF)" }
		}, /* @__PURE__ */ React.createElement(IconFont, {
			type: "pisell2-plus",
			style: { fontSize: "24px" }
		})), /* @__PURE__ */ React.createElement("span", { className: "select-holder-name" }, locales.getText("pisell2.product.card.add.holder.modal.add"))));
	};
	return /* @__PURE__ */ React.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(PisellModal, {
		open: visible,
		onCancel: onClose,
		onOk: handleConfirm,
		width: 780,
		footer: null,
		title,
		headerDivider: false
	}, /* @__PURE__ */ React.createElement("div", { className: "select-holder-modal-content" }, /* @__PURE__ */ React.createElement(PisellCustomCheckboxGroup, {
		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.createElement("div", { className: "select-holder-modal-footer" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, {
		size: "large",
		onClick: onClose,
		className: "select-holder-modal-cancel-button"
	}, locales.getText("pisell2.product.card.add.holder.modal.cancel"))), /* @__PURE__ */ React.createElement("div", { className: "select-holder-modal-footer-right" }, /* @__PURE__ */ React.createElement(Button, {
		size: "large",
		onClick: handleClear,
		className: "select-holder-modal-clear-button"
	}, locales.getText("pisell2.product.card.add.holder.modal.clear")), /* @__PURE__ */ React.createElement(Button, {
		size: "large",
		type: "primary",
		onClick: handleApply,
		className: "select-holder-modal-apply-button"
	}, locales.getText("pisell2.product.card.add.holder.modal.apply")))))));
};
//#endregion
export { SelectHolderModal as default };
