const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
//#region src/components/pisellFloorMapLayout/components/FloorMapImageElement.tsx
/**
* 平面图「图片图元」内层展示：支持 URL、object-fit 铺满；无地址或加载失败时占位
*/
const PREFIX = "pisell-floor-map-layout";
const I18N_IMG = "pisell-floor-map-layout.image-element";
function FloorMapImageElement(props) {
	const { imageUrl, name } = props;
	const [broken, setBroken] = (0, react.useState)(false);
	const trimmed = imageUrl != null ? String(imageUrl).trim() : "";
	(0, react.useEffect)(() => {
		setBroken(false);
	}, [trimmed]);
	const label = name != null && String(name).trim() ? String(name).trim() : _pisell_utils.locales.getText(`${I18N_IMG}.default-name`);
	if (!trimmed || broken) return /* @__PURE__ */ react.default.createElement("div", {
		className: `${PREFIX}-image-element-placeholder`,
		style: {
			width: "100%",
			height: "100%",
			boxSizing: "border-box",
			display: "flex",
			flexDirection: "column",
			alignItems: "center",
			justifyContent: "center",
			padding: 8,
			background: "#fafafa",
			border: "2px dashed #bfbfbf",
			borderRadius: 4,
			fontSize: 11,
			color: "#8c8c8c",
			textAlign: "center",
			lineHeight: 1.4,
			overflow: "hidden"
		}
	}, /* @__PURE__ */ react.default.createElement("span", { style: {
		fontWeight: 600,
		color: "#595959",
		marginBottom: 4
	} }, label), /* @__PURE__ */ react.default.createElement("span", null, !trimmed ? _pisell_utils.locales.getText(`${I18N_IMG}.hint-no-url`) : _pisell_utils.locales.getText(`${I18N_IMG}.hint-load-fail`)));
	return /* @__PURE__ */ react.default.createElement("img", {
		src: trimmed,
		alt: label,
		draggable: false,
		onError: () => setBroken(true),
		style: {
			width: "100%",
			height: "100%",
			objectFit: "cover",
			display: "block",
			pointerEvents: "none",
			userSelect: "none"
		}
	});
}
//#endregion
exports.FloorMapImageElement = FloorMapImageElement;
