import { toPropertyKey } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/toPropertyKey.js";
import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import { FLOOR_MAP_LAYOUT_CLASS_PREFIX } from "../floorMapLayoutConstants.js";
import { expandPaletteEntriesByQuantity } from "../utils/floorMapToolbarPalette.js";
import PisellContainer from "../../pisellContainer/index.js";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import classNames from "classnames";
//#region src/components/pisellFloorMapLayout/components/FloorMapToolbarViewAllModal.tsx
/**
* 侧栏 palette「查看全部」：任意分类下图元超过展示上限时，弹窗内按数量多选并一键落点。
*/
const I18N_TB = "pisell-floor-map-layout.toolbar";
/** 单种图元在弹窗内可添加的最大数量 */
const PALETTE_VIEW_ALL_MODAL_MAX_QTY = 99;
function FloorMapToolbarViewAllModal(props) {
	const { open, categoryLabel, entries, onClose, onConfirm, renderEntryPreview, platform = "pc" } = props;
	const [quantities, setQuantities] = useState({});
	useEffect(() => {
		if (!open) setQuantities({});
	}, [open]);
	const totalQty = useMemo(() => Object.values(quantities).reduce((sum, n) => sum + (Number.isFinite(n) && n > 0 ? n : 0), 0), [quantities]);
	const setQty = useCallback((key, next) => {
		const clamped = Math.max(0, Math.min(PALETTE_VIEW_ALL_MODAL_MAX_QTY, next));
		setQuantities((prev) => {
			if (clamped === 0) {
				const { [key]: _removed } = prev;
				return _objectWithoutProperties(prev, [key].map(toPropertyKey));
			}
			return _objectSpread2(_objectSpread2({}, prev), {}, { [key]: clamped });
		});
	}, []);
	const title = useMemo(() => locales.getText(`${I18N_TB}.view-all-modal-title`).replace(/\{category\}/g, categoryLabel), [categoryLabel]);
	return /* @__PURE__ */ React.createElement(PisellContainer, {
		renderType: "modal",
		props: {
			platform,
			open,
			title,
			onCancel: onClose,
			destroyOnClose: true,
			width: 520,
			zIndex: 1100,
			wrapClassName: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal`,
			okText: locales.getText(`${I18N_TB}.view-all-modal-add`),
			cancelText: locales.getText(`${I18N_TB}.view-all-modal-cancel`),
			okButtonProps: { disabled: totalQty === 0 },
			onOk: () => {
				if (totalQty === 0) return;
				onConfirm(expandPaletteEntriesByQuantity(entries, quantities));
				onClose();
			}
		}
	}, /* @__PURE__ */ React.createElement("p", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-hint` }, locales.getText(`${I18N_TB}.view-all-modal-hint`)), /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-grid` }, entries.map((entry) => {
		var _quantities$entry$key;
		const qty = (_quantities$entry$key = quantities[entry.key]) !== null && _quantities$entry$key !== void 0 ? _quantities$entry$key : 0;
		const selected = qty > 0;
		return /* @__PURE__ */ React.createElement("div", {
			key: entry.key,
			className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card`, { [`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card--selected`]: selected })
		}, /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-preview` }, renderEntryPreview(entry)), /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-label` }, entry.label), /* @__PURE__ */ React.createElement("div", {
			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-stepper`,
			onClick: (e) => e.stopPropagation()
		}, /* @__PURE__ */ React.createElement("button", {
			type: "button",
			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-stepper-btn`,
			disabled: qty <= 0,
			"aria-label": locales.getText(`${I18N_TB}.view-all-modal-qty-decrease`),
			onClick: () => setQty(entry.key, qty - 1)
		}, /* @__PURE__ */ React.createElement(MinusOutlined, null)), /* @__PURE__ */ React.createElement("span", {
			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-stepper-qty`,
			"aria-live": "polite"
		}, qty), /* @__PURE__ */ React.createElement("button", {
			type: "button",
			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-stepper-btn`,
			disabled: qty >= PALETTE_VIEW_ALL_MODAL_MAX_QTY,
			"aria-label": locales.getText(`${I18N_TB}.view-all-modal-qty-increase`),
			onClick: () => setQty(entry.key, qty + 1)
		}, /* @__PURE__ */ React.createElement(PlusOutlined, null))));
	})));
}
//#endregion
export { FloorMapToolbarViewAllModal as default };
