function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/**
 * 平面图「内置图形图元」内层展示：根据 `builtinShapeKey` 渲染内置 SVG 图形；
 * 未选 / key 已失效时给出与图片图元一致风格的虚线占位（可在侧栏 Select 中选择）。
 *
 * 与 {@link FloorMapImageElement} 对位：
 * - 同样无数据源绑定；
 * - 同样以「容器铺满」的方式渲染单一视觉；
 * - 同样允许 `name` 作为占位时的标题。
 *
 * 方向自适应：def 标了 `orientationAware: true` 的图形（沙发 / 大门），
 * wrapper 用 `ResizeObserver` 跟踪容器宽高；高 > 宽时把整张图形 rotate 90deg
 * + swap dims，让横向设计的图形（沙发）或贴底墙的图形（大门）在瘦高槽位里
 * 自然变成竖向 / 贴侧墙 —— 不需要额外的「-vertical」key 或持久化方向字段。
 */
import React, { useLayoutEffect, useRef, useState } from 'react';
import { locales } from '@pisell/utils';
import { getFloorMapBuiltinShapeDef } from "../utils/floorMapBuiltinShapes";
var PREFIX = 'pisell-floor-map-layout';
var I18N = 'pisell-floor-map-layout.builtin-shape';
export function FloorMapBuiltinShapeElement(props) {
  var builtinShapeKey = props.builtinShapeKey,
    name = props.name,
    fillColor = props.fillColor,
    strokeColor = props.strokeColor;
  var def = getFloorMapBuiltinShapeDef(builtinShapeKey);
  var fallbackLabel = name != null && String(name).trim() ? String(name).trim() : locales.getText("".concat(I18N, ".default-name"));

  /**
   * 测量容器宽高用于「方向自适应」。仅在 `def.orientationAware === true` 时
   * 真正订阅 ResizeObserver；其它图形不付任何 JS 成本（保持原有零开销）。
   * 初始用同步 `getBoundingClientRect()` 喂一帧，避免首次 paint 出现「先横后旋」
   * 的闪烁。
   */
  var orientationAware = !!(def !== null && def !== void 0 && def.orientationAware);
  var wrapperRef = useRef(null);
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    size = _useState2[0],
    setSize = _useState2[1];
  useLayoutEffect(function () {
    if (!orientationAware) return;
    var el = wrapperRef.current;
    if (!el) return;
    var measure = function measure(w, h) {
      setSize(function (prev) {
        return prev && prev.w === w && prev.h === h ? prev : {
          w: w,
          h: h
        };
      });
    };
    var rect = el.getBoundingClientRect();
    measure(rect.width, rect.height);
    var ro = new ResizeObserver(function (entries) {
      var e = entries[0];
      if (!e) return;
      measure(e.contentRect.width, e.contentRect.height);
    });
    ro.observe(el);
    return function () {
      return ro.disconnect();
    };
  }, [orientationAware]);
  if (!def) {
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(PREFIX, "-builtin-shape-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.createElement("span", {
      style: {
        fontWeight: 600,
        color: '#595959',
        marginBottom: 4
      }
    }, fallbackLabel), /*#__PURE__*/React.createElement("span", null, locales.getText("".concat(I18N, ".hint-no-key"))));
  }
  var isVertical = orientationAware && size != null && size.h > size.w;
  return /*#__PURE__*/React.createElement("div", {
    ref: wrapperRef,
    className: "".concat(PREFIX, "-builtin-shape"),
    style: {
      width: '100%',
      height: '100%',
      display: 'block',
      position: 'relative',
      pointerEvents: 'none',
      userSelect: 'none',
      overflow: 'hidden'
    },
    "aria-label": fallbackLabel,
    role: "img",
    "data-orientation": isVertical ? 'vertical' : 'horizontal'
  }, isVertical ?
  /*#__PURE__*/
  /**
   * 容器更高时，让内层方框 swap dims（h × w），再 `rotate(90deg)`：
   * - 旋转前框尺寸 = 父容器 height × width；
   * - 旋转后视觉占位 = 父容器 width × height（刚好填满）；
   * - SVG 在内层用 100% 宽高，最终图形按原始横向 viewBox 比例缩放并旋转，
   *   保持沙发坐垫 / 大门门扇等细节比例不被压扁。
   */
  React.createElement("div", {
    style: {
      position: 'absolute',
      left: '50%',
      top: '50%',
      width: size.h,
      height: size.w,
      transform: 'translate(-50%, -50%) rotate(90deg)',
      transformOrigin: 'center center'
    }
  }, def.render({
    fillColor: fillColor,
    strokeColor: strokeColor
  })) : def.render({
    fillColor: fillColor,
    strokeColor: strokeColor
  }));
}