import ItemLayer from "./ItemLayer.js";
import { FLOOR_MAP_LAYOUT_CLASS_PREFIX } from "../floorMapLayoutConstants.js";
import useEngineContext from "../../../hooks/useEngineContext.js";
import { getFloorMapCanvasDisplayName, getFloorMapDisplayLocale, getFloorMapLayoutText } from "../utils/floorMapCanvasDisplay.js";
import { mergeCanvasesForTabs } from "../utils/mergeCanvasesForTabs.js";
import React from "react";
import classNames from "classnames";
import "./FloorMapOverview.less";
//#region src/components/pisellFloorMapLayout/components/FloorMapOverview.tsx
/**
* FloorMapOverview - 阅读态「All」全览视图（纯渲染版）
*
* 仅负责把 {@link OverviewLayout} 中各画布的图元渲染到对应的绝对定位区域里；
* 由 PisellFloorMapLayout 在主 TransformWrapper 内挂载，与单画布共享同一套
* 视口控件（缩放、平移、锁定、全屏、fitBounds、网格按钮等）。
*
* 设计要点：
* - 不再自带 TransformWrapper / ResizeObserver / fit 算法；
* - 每个画布作为独立区域，仅一条细边框作分隔，无背景色/网格；
* - 画布名显示在边框外的标题带；标题不拦截图元交互；
* - 仅渲染 ItemLayer（阅读态），与单画布的 hover/click 行为一致；编辑层不渲染。
*/
const I18N_OVERVIEW_AREA_BADGE = "pisell-floor-map-layout.overview.area-title-badge";
const I18N_EMPTY = "pisell-floor-map-layout.overview.empty";
function FloorMapOverview(props) {
	const { overviewLayout, config, itemUnit = "pixel", renderItem, viewportScale, enableHover = true, onItemClick, onItemHover, onItemLeave, getMergedItemWrapperStyle, readModeSelectedItemId, onSelectCanvas, className } = props;
	const displayLocale = getFloorMapDisplayLocale(useEngineContext());
	if (overviewLayout.areas.length === 0) return /* @__PURE__ */ React.createElement("div", {
		className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview`, `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview--empty`, className),
		style: {
			width: "100%",
			height: "100%"
		}
	}, getFloorMapLayoutText(I18N_EMPTY, displayLocale));
	/**
	* 用 mergeCanvasesForTabs 构造 canvasId → displayName 的映射；
	* 避免在循环里多次调用。
	*/
	const displayNameById = /* @__PURE__ */ new Map();
	for (const canvas of mergeCanvasesForTabs(config)) displayNameById.set(canvas.id, getFloorMapCanvasDisplayName(canvas, displayLocale));
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview`, className),
		style: {
			position: "relative",
			width: overviewLayout.totalWidth,
			height: overviewLayout.totalHeight
		}
	}, overviewLayout.areas.map((area) => {
		var _displayNameById$get;
		const displayName = (_displayNameById$get = displayNameById.get(area.canvasId)) !== null && _displayNameById$get !== void 0 ? _displayNameById$get : area.canvasId;
		const safeScale = viewportScale != null && Number.isFinite(viewportScale) && viewportScale > 0 ? viewportScale : 1;
		const inverseScale = 1 / safeScale;
		return /* @__PURE__ */ React.createElement("div", {
			key: area.canvasId,
			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-block`,
			style: {
				position: "absolute",
				left: area.x,
				top: area.y,
				width: area.contentWidth
			}
		}, /* @__PURE__ */ React.createElement("div", {
			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title`,
			title: displayName,
			style: {
				height: area.titleBandHeight,
				transform: `scale(${inverseScale})`,
				transformOrigin: "top left",
				width: `${100 * safeScale}%`,
				maxWidth: `${area.contentWidth * safeScale}px`
			}
		}, onSelectCanvas ? /* @__PURE__ */ React.createElement("button", {
			type: "button",
			className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-inner`, `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-inner--clickable`),
			title: displayName,
			"aria-label": displayName,
			onClick: (e) => {
				e.stopPropagation();
				onSelectCanvas(area.canvasId);
			}
		}, /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-badge` }, getFloorMapLayoutText(I18N_OVERVIEW_AREA_BADGE, displayLocale)), /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-text` }, displayName)) : /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-inner` }, /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-badge` }, getFloorMapLayoutText(I18N_OVERVIEW_AREA_BADGE, displayLocale)), /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-text` }, displayName))), /* @__PURE__ */ React.createElement("div", {
			className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area`, { [`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area--clickable`]: Boolean(onSelectCanvas) }),
			style: {
				width: area.contentWidth,
				height: area.contentHeight
			},
			onClick: onSelectCanvas ? (e) => {
				/** 点到图元交给图元自身处理，仅空白区域才切换画布 */
				if (e.target.closest(`.pisell-floor-map-layout-item`)) return;
				onSelectCanvas(area.canvasId);
			} : void 0
		}, /* @__PURE__ */ React.createElement(ItemLayer, {
			items: area.items,
			renderItem,
			viewportScale,
			cellSize: area.cellSize,
			itemUnit,
			contentWidth: area.contentWidth,
			contentHeight: area.contentHeight,
			contentOffsetX: area.contentOffsetX,
			contentOffsetY: area.contentOffsetY,
			enableHover,
			itemHoverOutline: enableHover,
			onItemClick,
			onItemHover,
			onItemLeave,
			getMergedItemWrapperStyle,
			readModeSelectedItemId
		})));
	}));
}
//#endregion
export { FloorMapOverview as default };
