import React from 'react';
import { defaultReservationTableRows } from "../floorMap/reservationMock";
import { mapPisellReservationRowToFloorRoomCardData } from "./mapRowToFloorRoomCardData";
import { ReservationFloorRoomCard } from "./ReservationFloorRoomCard";
var meta = {
  title: 'Plus/PisellReservation/FloorRoomCard',
  component: ReservationFloorRoomCard,
  parameters: {
    layout: 'padded'
  }
};
export default meta;
var demoRow = defaultReservationTableRows.find(function (r) {
  return r.id === 't2';
});
var cardData = mapPisellReservationRowToFloorRoomCardData(demoRow, 'T-2');
var DENSITIES = ['comfortable', 'compact', 'mini', 'micro'];

/**
 * 方桌 / 圆桌 × 四档密度（显式 density，不依赖 ResizeObserver）
 */
export var DensityMatrix = {
  render: function DensityMatrixStory() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 24,
        fontFamily: 'system-ui, sans-serif'
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        fontSize: 13,
        color: '#666'
      }
    }, "\u6BCF\u683C\u56FA\u5B9A\u5BB9\u5668\u5C3A\u5BF8\uFF1Bdensity \u4E3A\u663E\u5F0F\u6863\u4F4D\uFF0C\u7528\u4E8E\u5BF9\u7167 UI \u964D\u7EA7\uFF08\u91D1\u989D\u5E26\u3001Next \u6761\u3001\u591A\u9884\u8BA2\u9884\u89C8\u7B49\uFF09\u3002"), ['rect', 'circle'].map(function (shape) {
      return /*#__PURE__*/React.createElement("div", {
        key: shape
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          marginBottom: 8,
          fontWeight: 600
        }
      }, shape === 'rect' ? '方桌' : '圆桌'), /*#__PURE__*/React.createElement("div", {
        style: {
          display: 'grid',
          gridTemplateColumns: "repeat(".concat(DENSITIES.length, ", minmax(120px, 1fr))"),
          gap: 12,
          alignItems: 'start'
        }
      }, DENSITIES.map(function (d) {
        return /*#__PURE__*/React.createElement("div", {
          key: d,
          style: {
            display: 'flex',
            flexDirection: 'column',
            gap: 6
          }
        }, /*#__PURE__*/React.createElement("span", {
          style: {
            fontSize: 11,
            color: '#888'
          }
        }, d), /*#__PURE__*/React.createElement("div", {
          style: {
            width: shape === 'rect' ? 168 : 140,
            height: shape === 'rect' ? 124 : 140,
            boxSizing: 'border-box'
          }
        }, /*#__PURE__*/React.createElement(ReservationFloorRoomCard, {
          data: cardData,
          shellShape: shape,
          hideHeaderCapacity: true,
          density: d,
          viewportScale: 1,
          elementLayoutHeightPx: shape === 'circle' ? 140 : undefined
        })));
      })));
    }));
  }
};