import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React from "react";
import classNames from "classnames";
import "./MapLayer.less";
//#region src/components/pisellFloorMapLayout/components/MapLayer.tsx
/**
* MapLayer - 楼层图底层
* 负责背景（无/纯色/图片/SVG）、网格线、padding、gap
*/
const PREFIX = "pisell-floor-map-layout";
/**
* 解析 padding/gap 为 CSS 值
*/
function toCssSize(v) {
	if (v === void 0) return void 0;
	return typeof v === "number" ? `${v}px` : v;
}
function MapLayer(props) {
	var _config$snapStep;
	const { config = {}, contentWidth = 0, contentHeight = 0, cellSize = 64, preferCanvasGrid = false, pointerEventsNone = false, children, className } = props;
	const { backgroundType = "none", backgroundColor, backgroundImage, backgroundSvg, showGrid = false, padding, gap } = config;
	const paddingCss = toCssSize(padding);
	const gapCss = toCssSize(gap);
	const backgroundStyle = {};
	if (preferCanvasGrid) backgroundStyle.backgroundColor = "transparent";
	else if (backgroundType === "color" && backgroundColor) backgroundStyle.backgroundColor = backgroundColor;
	if (backgroundType === "image" && backgroundImage) {
		backgroundStyle.backgroundImage = `url(${backgroundImage})`;
		backgroundStyle.backgroundSize = "cover";
		backgroundStyle.backgroundPosition = "center";
	}
	if (backgroundType === "svg" && backgroundSvg) {
		backgroundStyle.backgroundImage = backgroundSvg.startsWith("http") || backgroundSvg.startsWith("/") ? `url(${backgroundSvg})` : `url("data:image/svg+xml,${encodeURIComponent(backgroundSvg)}")`;
		backgroundStyle.backgroundSize = "cover";
		backgroundStyle.backgroundPosition = "center";
	}
	const containerStyle = _objectSpread2({
		padding: paddingCss,
		gap: gapCss
	}, pointerEventsNone ? { pointerEvents: "none" } : {});
	/** 网格线：用 CSS 线性渐变模拟（默认不小于 50px，避免像素模式下格线过密） */
	const snapStep = Math.max(1, Number((_config$snapStep = config.snapStep) !== null && _config$snapStep !== void 0 ? _config$snapStep : 1) || 1);
	const gridSize = Math.max(50, Math.round(cellSize * snapStep));
	const gridStyle = showGrid ? {
		backgroundImage: `
          linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)
        `,
		backgroundSize: `${gridSize}px ${gridSize}px`
	} : {};
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames(`${PREFIX}-map-layer`, className),
		style: _objectSpread2(_objectSpread2(_objectSpread2({}, backgroundStyle), containerStyle), gridStyle)
	}, children);
}
//#endregion
export { MapLayer as default };
