import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../../hooks/useEngineContext.js";
import { getFloorMapCanvasDisplayName, getFloorMapDisplayLocale, initFloorMapLayoutLocales, seedFloorMapCanvasNameI18n } from "../utils/floorMapCanvasDisplay.js";
import React, { useCallback, useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import { Form, Input, Modal } from "antd";
import { EditOutlined } from "@ant-design/icons";
import classNames from "classnames";
import "./CanvasTabs.less";
//#region src/components/pisellFloorMapLayout/components/CanvasTabs.tsx
/**
* CanvasTabs - 多画布 Tab，支持切换、动态添加、删除与重命名（编辑态）
* - 展示名：可选 `nameKey` + `locales.getText`，否则用 `name`（字符串或多语言对象）
* - 角标：可选 `tabBadge` 或由布局层注入合并后的数量
*/
const PREFIX = "pisell-floor-map-layout";
const I18N_EMPTY = "pisell-floor-map-layout.canvas-tabs.empty";
const I18N_ADD = "pisell-floor-map-layout.canvas-tabs.add";
const I18N_ADD_TITLE = "pisell-floor-map-layout.canvas-tabs.add-title";
const I18N_HINT = "pisell-floor-map-layout.canvas-tabs.hint";
const I18N_RENAME_ARIA = "pisell-floor-map-layout.canvas-tabs.rename-aria";
const I18N_REMOVE_ARIA = "pisell-floor-map-layout.canvas-tabs.remove-aria";
const I18N_RENAME_TITLE = "pisell-floor-map-layout.canvas-tabs.rename-title";
const I18N_RENAME_BTN_ARIA = "pisell-floor-map-layout.canvas-tabs.rename-button-aria";
const I18N_RENAME_BTN_TITLE = "pisell-floor-map-layout.canvas-tabs.rename-button-title";
const I18N_RENAME_MODAL_TITLE = "pisell-floor-map-layout.canvas-tabs.rename-modal-title";
const I18N_RENAME_MODAL_OK = "pisell-floor-map-layout.canvas-tabs.rename-modal-ok";
const I18N_RENAME_MODAL_CANCEL = "pisell-floor-map-layout.canvas-tabs.rename-modal-cancel";
/** 与 Translation 弹层语言列表兜底一致（无 store 时） */
const FALLBACK_LANG_LIST = [
	{
		code: "zh-CN",
		text: "简体中文"
	},
	{
		code: "en",
		text: "English"
	},
	{
		code: "zh-HK",
		text: "繁體中文"
	},
	{
		code: "ja",
		text: "日本語"
	},
	{
		code: "pt",
		text: "Português"
	}
];
function CanvasTabs(props) {
	var _engineCtx$appHelper$, _engineCtx$appHelper;
	const { canvases, currentCanvasId, onTabChange, canEdit = false, onAddCanvas, onRemoveCanvas, onRenameCanvas, className } = props;
	const engineCtx = useEngineContext();
	const engineLocale = getFloorMapDisplayLocale(engineCtx);
	initFloorMapLayoutLocales(engineLocale);
	const languageList = (_engineCtx$appHelper$ = engineCtx === null || engineCtx === void 0 || (_engineCtx$appHelper = engineCtx.appHelper) === null || _engineCtx$appHelper === void 0 || (_engineCtx$appHelper = _engineCtx$appHelper.store) === null || _engineCtx$appHelper === void 0 || (_engineCtx$appHelper = _engineCtx$appHelper.getState()) === null || _engineCtx$appHelper === void 0 || (_engineCtx$appHelper = _engineCtx$appHelper.global) === null || _engineCtx$appHelper === void 0 || (_engineCtx$appHelper = _engineCtx$appHelper.shopLanguages) === null || _engineCtx$appHelper === void 0 ? void 0 : _engineCtx$appHelper.list) !== null && _engineCtx$appHelper$ !== void 0 ? _engineCtx$appHelper$ : FALLBACK_LANG_LIST;
	const enabledCanvases = canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
	const labelMap = useMemo(() => {
		const m = /* @__PURE__ */ new Map();
		enabledCanvases.forEach((c) => {
			m.set(c.id, getFloorMapCanvasDisplayName(c, engineLocale));
		});
		return m;
	}, [enabledCanvases, engineLocale]);
	const canRemove = canEdit && enabledCanvases.length > 1 && Boolean(onRemoveCanvas);
	const canRename = canEdit && Boolean(onRenameCanvas);
	const [renameModal, setRenameModal] = useState(null);
	const handleRemove = (e, canvasId) => {
		e.stopPropagation();
		onRemoveCanvas === null || onRemoveCanvas === void 0 || onRemoveCanvas(canvasId);
	};
	const openRenameForCanvas = useCallback((c) => {
		var _labelMap$get;
		if (!canRename) return;
		setRenameModal({
			canvas: c,
			value: seedFloorMapCanvasNameI18n(c, (_labelMap$get = labelMap.get(c.id)) !== null && _labelMap$get !== void 0 ? _labelMap$get : getFloorMapCanvasDisplayName(c, engineLocale))
		});
	}, [
		canRename,
		labelMap,
		engineLocale
	]);
	const openRenameModal = (e, c) => {
		e.stopPropagation();
		openRenameForCanvas(c);
	};
	const commitRenameModal = () => {
		if (!renameModal) return;
		const v = renameModal.value;
		if (Object.values(v).some((s) => typeof s === "string" && s.trim())) onRenameCanvas === null || onRenameCanvas === void 0 || onRenameCanvas(renameModal.canvas.id, v);
		setRenameModal(null);
	};
	if (enabledCanvases.length === 0 && !canEdit) return /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-canvas-tabs`, `${PREFIX}-canvas-tabs-empty`, className) }, locales.getText(I18N_EMPTY));
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
		className: classNames(`${PREFIX}-canvas-tabs`, className),
		role: "tablist"
	}, enabledCanvases.map((c) => {
		var _labelMap$get2;
		const displayLabel = (_labelMap$get2 = labelMap.get(c.id)) !== null && _labelMap$get2 !== void 0 ? _labelMap$get2 : getFloorMapCanvasDisplayName(c, engineLocale);
		const badge = c.tabBadge !== void 0 && c.tabBadge !== null ? c.tabBadge : null;
		return /* @__PURE__ */ React.createElement("div", {
			key: c.id,
			role: "tab",
			"aria-selected": currentCanvasId === c.id,
			className: classNames(`${PREFIX}-canvas-tabs-tab`, { [`${PREFIX}-canvas-tabs-tab-active`]: currentCanvasId === c.id }),
			onClick: () => onTabChange(c.id)
		}, /* @__PURE__ */ React.createElement("span", {
			className: `${PREFIX}-canvas-tabs-tab-label`,
			title: canRename ? locales.getText(I18N_RENAME_TITLE) : void 0,
			onDoubleClick: canRename ? (e) => openRenameModal(e, c) : void 0
		}, displayLabel, badge != null ? /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-canvas-tabs-tab-badge` }, " ", "(", badge, ")") : null), canRename ? /* @__PURE__ */ React.createElement("button", {
			type: "button",
			className: `${PREFIX}-canvas-tabs-tab-rename`,
			"aria-label": `${locales.getText(I18N_RENAME_BTN_ARIA)} · ${displayLabel}`,
			title: locales.getText(I18N_RENAME_BTN_TITLE),
			onClick: (e) => {
				e.stopPropagation();
				openRenameForCanvas(c);
			}
		}, /* @__PURE__ */ React.createElement(EditOutlined, null)) : null, canRemove && /* @__PURE__ */ React.createElement("button", {
			type: "button",
			"aria-label": `${locales.getText(I18N_REMOVE_ARIA)} · ${displayLabel}`,
			className: `${PREFIX}-canvas-tabs-tab-remove`,
			onClick: (e) => handleRemove(e, c.id)
		}));
	}), canEdit && onAddCanvas && /* @__PURE__ */ React.createElement("button", {
		type: "button",
		className: `${PREFIX}-canvas-tabs-add`,
		onClick: onAddCanvas,
		title: locales.getText(I18N_ADD_TITLE)
	}, locales.getText(I18N_ADD)), enabledCanvases.length === 0 && canEdit && /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-canvas-tabs-empty-hint` }, locales.getText(I18N_HINT))), /* @__PURE__ */ React.createElement(Modal, {
		title: locales.getText(I18N_RENAME_MODAL_TITLE),
		open: renameModal != null,
		onOk: commitRenameModal,
		onCancel: () => setRenameModal(null),
		okText: locales.getText(I18N_RENAME_MODAL_OK),
		cancelText: locales.getText(I18N_RENAME_MODAL_CANCEL),
		destroyOnClose: true,
		wrapClassName: `${PREFIX}-canvas-tabs-rename-modal-wrap`,
		styles: {
			header: {
				margin: 0,
				padding: "10px 14px 6px"
			},
			body: { padding: "8px 14px 10px" },
			footer: {
				margin: 0,
				padding: "8px 14px 10px"
			}
		}
	}, renameModal ? /* @__PURE__ */ React.createElement(Form, {
		layout: "vertical",
		className: `${PREFIX}-canvas-tabs-rename-form`,
		requiredMark: false
	}, languageList.map((d) => {
		var _renameModal$value;
		return /* @__PURE__ */ React.createElement(Form.Item, {
			label: d.text,
			key: d.code
		}, /* @__PURE__ */ React.createElement(Input, {
			value: (_renameModal$value = renameModal.value[d.code]) !== null && _renameModal$value !== void 0 ? _renameModal$value : "",
			onChange: (e) => setRenameModal((prev) => prev ? _objectSpread2(_objectSpread2({}, prev), {}, { value: _objectSpread2(_objectSpread2({}, prev.value), {}, { [d.code]: e.target.value }) }) : null),
			"aria-label": `${locales.getText(I18N_RENAME_ARIA)} · ${d.text}`
		}));
	})) : null));
}
//#endregion
export { CanvasTabs as default };
