/**
 * 内置图形图元（`floorMapBuiltinShape`）的预设清单。
 *
 * 每个预设：
 * - `key`：持久化在 `sceneElement.builtinShapeKey`，跨语言稳定；
 * - `labelKey`：展示名 i18n key（在 `locales.ts` / `-ja` / `-pt` 中维护）；
 * - `defaultSize`：调色板落点 / 切换 kind 时的初始像素尺寸，比例与下文 viewBox 一致；
 * - `render(props)`：内置 SVG 图形（统一 `preserveAspectRatio="xMidYMid meet"`，
 *   按 viewBox 自然比例缩放并居中，容器尺寸变化时不会被拉伸变形）。
 *
 * 不引入图片资源 / 字体图标，全部 inline SVG，避免额外构建依赖与请求。
 */
import React from 'react';
var I18N_PREFIX = 'pisell-floor-map-layout.builtin-shape';

/** 内置图形渲染函数共享 props（容器已限定 100% 宽高） */

/**
 * 通用 SVG 包装：所有内置图形默认 `xMidYMid meet`，按 viewBox 比例缩放并居中，
 * 容器尺寸变化时不会被拉伸变形（之前的 `none` 会让图形随容器宽高比扭曲，是
 * 5 种图形在矩形容器里全部失真的根本原因）。
 *
 * 个别图形（如「分隔」纯色填充条）显式传 `preserveAspectRatio="none"`，让图
 * 形随容器宽高自由伸展，从而支持「横向 / 纵向同一个 key 通过拖宽 / 拖高自然
 * 切换」的语义。
 */
function ShapeSvg(props) {
  var children = props.children,
    viewBox = props.viewBox,
    _props$preserveAspect = props.preserveAspectRatio,
    preserveAspectRatio = _props$preserveAspect === void 0 ? 'xMidYMid meet' : _props$preserveAspect;
  return /*#__PURE__*/React.createElement("svg", {
    width: "100%",
    height: "100%",
    viewBox: viewBox,
    preserveAspectRatio: preserveAspectRatio,
    xmlns: "http://www.w3.org/2000/svg",
    style: {
      display: 'block',
      pointerEvents: 'none',
      overflow: 'visible'
    }
  }, children);
}

/** 默认主色 / 描边色：偏中性灰，与地面其它图元（房间 / 桌位）调性一致 */
var DEFAULT_FILL = '#f1f3f5';
var DEFAULT_STROKE = '#6b7280';

/**
 * 厕所：标准公共卫生间「男 / 女」标识牌——外圈圆角牌底，中间一道竖分隔，
 * 左侧男（圆头 + 直筒身 + 双腿），右侧女（圆头 + 梯形裙 + 双腿）。
 * 比 CAD 坐便器俯视图远观更容易识别为「厕所」，跟其它平面图元（沙发 / 大门
 * 等也用图标化剪影）保持同一语言。
 * 人形与分隔线统一使用 `stroke` 色，整体牌底用 `fill`，跟 `sceneElement` 的
 * `fillColor` / `strokeColor` 覆盖保持联动。
 */
function renderToilet(props) {
  var _props$fillColor, _props$strokeColor;
  var fill = (_props$fillColor = props.fillColor) !== null && _props$fillColor !== void 0 ? _props$fillColor : DEFAULT_FILL;
  var stroke = (_props$strokeColor = props.strokeColor) !== null && _props$strokeColor !== void 0 ? _props$strokeColor : DEFAULT_STROKE;
  return /*#__PURE__*/React.createElement(ShapeSvg, {
    viewBox: "0 0 100 100"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "3",
    width: "94",
    height: "94",
    rx: "8",
    ry: "8",
    fill: fill,
    stroke: stroke,
    strokeWidth: "2.5"
  }), /*#__PURE__*/React.createElement("line", {
    x1: "50",
    y1: "14",
    x2: "50",
    y2: "86",
    stroke: stroke,
    strokeOpacity: "0.45",
    strokeWidth: "1.5"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "28",
    cy: "22",
    r: "6.5",
    fill: stroke
  }), /*#__PURE__*/React.createElement("rect", {
    x: "22",
    y: "31",
    width: "12",
    height: "20",
    rx: "2",
    fill: stroke
  }), /*#__PURE__*/React.createElement("rect", {
    x: "22",
    y: "48",
    width: "4.5",
    height: "28",
    rx: "1.5",
    fill: stroke
  }), /*#__PURE__*/React.createElement("rect", {
    x: "29.5",
    y: "48",
    width: "4.5",
    height: "28",
    rx: "1.5",
    fill: stroke
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "72",
    cy: "22",
    r: "6.5",
    fill: stroke
  }), /*#__PURE__*/React.createElement("path", {
    d: "M 65 31 L 79 31 L 86 60 L 58 60 Z",
    fill: stroke
  }), /*#__PURE__*/React.createElement("rect", {
    x: "66",
    y: "58",
    width: "4.5",
    height: "18",
    rx: "1.5",
    fill: stroke
  }), /*#__PURE__*/React.createElement("rect", {
    x: "73.5",
    y: "58",
    width: "4.5",
    height: "18",
    rx: "1.5",
    fill: stroke
  }));
}

/**
 * 分隔：纯色填充条。`preserveAspectRatio="none"` 让单一矩形随容器自然 stretch，
 * 因此「横分隔 / 竖分隔」用同一个 builtinShapeKey，只需拖宽或拖高即可切换：
 * - 拖成扁宽矩形 → 横向分隔条
 * - 拖成瘦高矩形 → 纵向分隔条
 * 不再画顶/底端帽 / 中分线等装饰元素，避免它们随 stretch 一起变形成奇怪的椭圆
 * / 斜条；内部就是 `fill` 实心矩形，`stroke` 若提供则作为外缘细描边，方便在
 * 同色画布上仍可见边界。
 */
function renderDivider(props) {
  var _props$fillColor2, _props$strokeColor2;
  var fill = (_props$fillColor2 = props.fillColor) !== null && _props$fillColor2 !== void 0 ? _props$fillColor2 : '#7a818c';
  var stroke = (_props$strokeColor2 = props.strokeColor) !== null && _props$strokeColor2 !== void 0 ? _props$strokeColor2 : '#3f4651';
  return /*#__PURE__*/React.createElement(ShapeSvg, {
    viewBox: "0 0 100 100",
    preserveAspectRatio: "none"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "0",
    y: "0",
    width: "100",
    height: "100",
    fill: fill,
    stroke: stroke,
    strokeWidth: "1",
    vectorEffect: "non-scaling-stroke"
  }));
}

/**
 * 柱子：建筑平面图常见的「实心圆 + 外细圈」结构柱标识；填充深灰，
 * 外圈细线让圆柱与场地装饰图层有视觉边界。
 */
function renderColumn(props) {
  var _props$fillColor3, _props$strokeColor3;
  var fill = (_props$fillColor3 = props.fillColor) !== null && _props$fillColor3 !== void 0 ? _props$fillColor3 : '#4b5563';
  var stroke = (_props$strokeColor3 = props.strokeColor) !== null && _props$strokeColor3 !== void 0 ? _props$strokeColor3 : '#1f2937';
  return /*#__PURE__*/React.createElement(ShapeSvg, {
    viewBox: "0 0 100 100"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "50",
    cy: "50",
    r: "40",
    fill: "none",
    stroke: stroke,
    strokeWidth: "1.5",
    opacity: "0.5"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "50",
    cy: "50",
    r: "34",
    fill: fill,
    stroke: stroke,
    strokeWidth: "2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "42",
    cy: "42",
    r: "6",
    fill: "#ffffff",
    opacity: "0.18"
  }));
}

/**
 * 沙发：三人位正面 / 俯前视。结构「靠背 3 凸 + 主体框 + 两侧扶手 + 3 块坐垫 +
 * 2 只脚」，与常见 icon set（Lucide / Material couch）的剪影一致；远观易辨识。
 */
function renderSofa(props) {
  var _props$fillColor4, _props$strokeColor4;
  var fill = (_props$fillColor4 = props.fillColor) !== null && _props$fillColor4 !== void 0 ? _props$fillColor4 : '#cbd2dc';
  var stroke = (_props$strokeColor4 = props.strokeColor) !== null && _props$strokeColor4 !== void 0 ? _props$strokeColor4 : '#4b5563';
  var cushion = props.fillColor ? props.fillColor : '#eef1f6';
  return /*#__PURE__*/React.createElement(ShapeSvg, {
    viewBox: "0 0 200 100"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "14",
    y: "8",
    width: "54",
    height: "32",
    rx: "14",
    ry: "14",
    fill: fill,
    stroke: stroke,
    strokeWidth: "2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "73",
    y: "8",
    width: "54",
    height: "32",
    rx: "14",
    ry: "14",
    fill: fill,
    stroke: stroke,
    strokeWidth: "2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "132",
    y: "8",
    width: "54",
    height: "32",
    rx: "14",
    ry: "14",
    fill: fill,
    stroke: stroke,
    strokeWidth: "2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "4",
    y: "34",
    width: "192",
    height: "52",
    rx: "12",
    ry: "12",
    fill: fill,
    stroke: stroke,
    strokeWidth: "2.2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "4",
    y: "44",
    width: "24",
    height: "42",
    rx: "8",
    ry: "8",
    fill: stroke,
    opacity: "0.2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "172",
    y: "44",
    width: "24",
    height: "42",
    rx: "8",
    ry: "8",
    fill: stroke,
    opacity: "0.2"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "32",
    y: "48",
    width: "44",
    height: "32",
    rx: "6",
    ry: "6",
    fill: cushion,
    stroke: stroke,
    strokeOpacity: "0.4",
    strokeWidth: "1"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "78",
    y: "48",
    width: "44",
    height: "32",
    rx: "6",
    ry: "6",
    fill: cushion,
    stroke: stroke,
    strokeOpacity: "0.4",
    strokeWidth: "1"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "124",
    y: "48",
    width: "44",
    height: "32",
    rx: "6",
    ry: "6",
    fill: cushion,
    stroke: stroke,
    strokeOpacity: "0.4",
    strokeWidth: "1"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "14",
    y: "86",
    width: "8",
    height: "10",
    rx: "2",
    fill: stroke
  }), /*#__PURE__*/React.createElement("rect", {
    x: "178",
    y: "86",
    width: "8",
    height: "10",
    rx: "2",
    fill: stroke
  }));
}

/**
 * 大门：标准 CAD 单开门符号。
 * - 底部一段实心粗墙体（左 / 右两段，中间留门洞）；
 * - 门扇从左侧合页位垂直立起（90° 开），用一根粗短矩形表示门扇厚度；
 * - 90° 虚线弧表示门扇旋转范围；
 * - 合页位有一个小圆点作为铰链标记，明确开门方向。
 */
/**
 * 俯视角五瓣花：`r` 为花冠半径，花瓣椭圆放射排列 + 花心圆。
 * 花盆顶部用 2～3 朵不同尺度的花 + 少量绿叶，避免只剩「几团圆叶像草」。
 */
function FlowerHead(props) {
  var cx = props.cx,
    cy = props.cy,
    r = props.r,
    petalFill = props.petalFill,
    petalStroke = props.petalStroke,
    centerFill = props.centerFill;
  var petalAngles = [0, 72, 144, 216, 288];
  return /*#__PURE__*/React.createElement("g", {
    transform: "translate(".concat(cx, ", ").concat(cy, ")")
  }, petalAngles.map(function (deg) {
    return /*#__PURE__*/React.createElement("ellipse", {
      key: deg,
      cx: "0",
      cy: -r * 0.52,
      rx: r * 0.38,
      ry: r * 0.58,
      fill: petalFill,
      stroke: petalStroke,
      strokeWidth: "1",
      transform: "rotate(".concat(deg, ")")
    });
  }), /*#__PURE__*/React.createElement("circle", {
    r: r * 0.24,
    fill: centerFill,
    stroke: petalStroke,
    strokeWidth: "0.9"
  }));
}

/**
 * 花盆：梯形盆体 + 盆沿；顶部 3 朵五瓣花（大中小）+ 两片托叶。
 * 花色 / 叶色用固定装饰色，不跟 `fillColor` 绑定，避免整株变成单色块；
 * 盆体仍吃 `fillColor` / `strokeColor` 覆盖。
 */
function renderFlowerPot(props) {
  var _props$fillColor5, _props$strokeColor5;
  var fill = (_props$fillColor5 = props.fillColor) !== null && _props$fillColor5 !== void 0 ? _props$fillColor5 : '#e8ece4';
  var stroke = (_props$strokeColor5 = props.strokeColor) !== null && _props$strokeColor5 !== void 0 ? _props$strokeColor5 : '#4b5563';
  var petalFill = '#fce7f3';
  var petalStroke = '#db2777';
  var centerFill = '#fbbf24';
  var leafFill = '#86efac';
  var leafStroke = '#15803d';
  return /*#__PURE__*/React.createElement(ShapeSvg, {
    viewBox: "0 0 100 100"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M 22 42 L 78 42 L 68 88 L 32 88 Z",
    fill: fill,
    stroke: stroke,
    strokeWidth: "2",
    strokeLinejoin: "round"
  }), /*#__PURE__*/React.createElement("ellipse", {
    cx: "50",
    cy: "42",
    rx: "30",
    ry: "7",
    fill: fill,
    stroke: stroke,
    strokeWidth: "2"
  }), /*#__PURE__*/React.createElement("ellipse", {
    cx: "50",
    cy: "40",
    rx: "26",
    ry: "5",
    fill: stroke,
    opacity: "0.12"
  }), /*#__PURE__*/React.createElement("ellipse", {
    cx: "38",
    cy: "36",
    rx: "10",
    ry: "5",
    fill: leafFill,
    stroke: leafStroke,
    strokeWidth: "1",
    transform: "rotate(-18 38 36)"
  }), /*#__PURE__*/React.createElement("ellipse", {
    cx: "62",
    cy: "36",
    rx: "10",
    ry: "5",
    fill: leafFill,
    stroke: leafStroke,
    strokeWidth: "1",
    transform: "rotate(18 62 36)"
  }), /*#__PURE__*/React.createElement(FlowerHead, {
    cx: 50,
    cy: 22,
    r: 13,
    petalFill: petalFill,
    petalStroke: petalStroke,
    centerFill: centerFill
  }), /*#__PURE__*/React.createElement(FlowerHead, {
    cx: 33,
    cy: 30,
    r: 9,
    petalFill: petalFill,
    petalStroke: petalStroke,
    centerFill: centerFill
  }), /*#__PURE__*/React.createElement(FlowerHead, {
    cx: 67,
    cy: 30,
    r: 9,
    petalFill: petalFill,
    petalStroke: petalStroke,
    centerFill: centerFill
  }));
}
function renderDoor(props) {
  var _props$fillColor6, _props$strokeColor6;
  var fill = (_props$fillColor6 = props.fillColor) !== null && _props$fillColor6 !== void 0 ? _props$fillColor6 : '#f8fafc';
  var stroke = (_props$strokeColor6 = props.strokeColor) !== null && _props$strokeColor6 !== void 0 ? _props$strokeColor6 : '#1f2937';
  return /*#__PURE__*/React.createElement(ShapeSvg, {
    viewBox: "0 0 100 100"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "0",
    y: "0",
    width: "100",
    height: "100",
    fill: fill,
    opacity: "0"
  }), /*#__PURE__*/React.createElement("rect", {
    x: "0",
    y: "80",
    width: "22",
    height: "12",
    rx: "1",
    fill: stroke
  }), /*#__PURE__*/React.createElement("rect", {
    x: "80",
    y: "80",
    width: "20",
    height: "12",
    rx: "1",
    fill: stroke
  }), /*#__PURE__*/React.createElement("rect", {
    x: "18",
    y: "14",
    width: "6",
    height: "72",
    rx: "2",
    ry: "2",
    fill: stroke
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "21",
    cy: "86",
    r: "3.5",
    fill: "#ffffff",
    stroke: stroke,
    strokeWidth: "1.5"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M 24 16 A 64 64 0 0 1 84 86",
    fill: "none",
    stroke: stroke,
    strokeOpacity: "0.65",
    strokeWidth: "1.6",
    strokeDasharray: "5 4"
  }));
}

/**
 * 内置图形预设清单（顺序即调色板 / 编辑面板下拉的展示顺序）。
 * `defaultSize` 比例严格跟随对应 SVG 的 viewBox：
 * - 厕所 / 柱子 / 大门：正方形（viewBox 100×100）
 * - 分隔：viewBox 100×100，但渲染层用 `preserveAspectRatio="none"`，
 *   `defaultSize` 给个常用的瘦高比例（32×160）作为「默认竖分隔」落点，
 *   用户可直接拖宽变横分隔，不需要换 key。
 * - 沙发：2:1 水平（viewBox 200×100）
 *
 * 新增预设：在此追加一项即可，编辑面板 / 调色板 / fallback 渲染会自动适配。
 */
export var FLOOR_MAP_BUILTIN_SHAPES = [{
  key: 'toilet',
  labelKey: "".concat(I18N_PREFIX, ".toilet"),
  defaultSize: {
    width: 96,
    height: 96
  },
  render: renderToilet
}, {
  key: 'divider',
  labelKey: "".concat(I18N_PREFIX, ".divider"),
  defaultSize: {
    width: 32,
    height: 160
  },
  render: renderDivider
}, {
  key: 'column',
  labelKey: "".concat(I18N_PREFIX, ".column"),
  defaultSize: {
    width: 72,
    height: 72
  },
  render: renderColumn
}, {
  key: 'sofa',
  labelKey: "".concat(I18N_PREFIX, ".sofa"),
  defaultSize: {
    width: 220,
    height: 110
  },
  render: renderSofa,
  /** 沙发原始 2:1 横向；拖成瘦高比时整张图形自动 rotate 90deg */
  orientationAware: true
}, {
  key: 'door',
  labelKey: "".concat(I18N_PREFIX, ".door"),
  defaultSize: {
    width: 96,
    height: 96
  },
  render: renderDoor,
  /** 门贴在底墙；拖成瘦高比时整张图形自动 rotate 90deg → 贴侧墙 */
  orientationAware: true
}, {
  key: 'flowerPot',
  labelKey: "".concat(I18N_PREFIX, ".flower-pot"),
  defaultSize: {
    width: 80,
    height: 96
  },
  render: renderFlowerPot
}];

/** 通过 key 查找预设，未命中返回 undefined（让上层显示「未选择」占位） */
export function getFloorMapBuiltinShapeDef(key) {
  if (!key) return undefined;
  return FLOOR_MAP_BUILTIN_SHAPES.find(function (s) {
    return s.key === key;
  });
}
export { DEFAULT_FILL as FLOOR_MAP_BUILTIN_SHAPE_DEFAULT_FILL };
export { DEFAULT_STROKE as FLOOR_MAP_BUILTIN_SHAPE_DEFAULT_STROKE };