"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var smart_block_view_exports = {};
__export(smart_block_view_exports, {
  SmartBlockView: () => SmartBlockView
});
module.exports = __toCommonJS(smart_block_view_exports);
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_data_hooks = require("../data-hooks.js");
var import_cell_position = require("../utils/cell-position.js");
var import_compute_block_css_vars = require("../utils/compute-block-css-vars.js");
var import_compute_cell_css_vars = require("../utils/compute-cell-css-vars.js");
var import_smart_block_context = require("../utils/smart-block-context.js");
var import_cell_accessory_scss = __toESM(require("./cell-accessory-scss.js"));
var import_cell_marker = require("./cell-marker.js");
var import_circle_donut = require("./circle-donut.js");
var import_shape_overlay = require("./shape-overlay.js");
var import_smart_block_view_scss = __toESM(require("./smart-block-view-scss.js"));
const VARIANT_CLASSES = {
  SOLID_BOXES: import_smart_block_view_scss.default.solidBoxes,
  NUMBERED_BOXES: import_smart_block_view_scss.default.numberedBoxes,
  STATS: import_smart_block_view_scss.default.stats,
  BAR_STATS: import_smart_block_view_scss.default.barStats,
  CIRCLE_STATS: import_smart_block_view_scss.default.circleStats,
  SOLID_BOXES_ALTERNATING: import_smart_block_view_scss.default.alternatingBoxes,
  SOLID_JOINED_BOXES: import_smart_block_view_scss.default.solidJoinedBoxes,
  SIDE_LINE_TEXT: import_smart_block_view_scss.default.sideLineText,
  TOP_LINE_TEXT: import_smart_block_view_scss.default.topLineText,
  OUTLINE_BOXES_WITH_TOP_CIRCLE: import_smart_block_view_scss.default.outlineBoxesWithTopCircle,
  BIG_BULLETS: import_smart_block_view_scss.default.bigBullets,
  SMALL_BULLETS: import_smart_block_view_scss.default.smallBullets,
  ARROW_BULLETS: import_smart_block_view_scss.default.arrowBullets,
  PROCESS_STEPS: import_smart_block_view_scss.default.processSteps,
  STAR_RATING: import_smart_block_view_scss.default.starRating,
  QUOTE_BOXES: import_smart_block_view_scss.default.quoteBoxes,
  TIMELINE: import_smart_block_view_scss.default.timeline,
  MINIMAL_TIMELINE: import_smart_block_view_scss.default.minimalTimeline,
  PILLS: import_smart_block_view_scss.default.pills,
  PYRAMID: import_smart_block_view_scss.default.pyramid,
  VERTICAL_FUNNEL: import_smart_block_view_scss.default.verticalFunnel,
  STAIRCASE: import_smart_block_view_scss.default.staircase,
  CIRCLE: import_smart_block_view_scss.default.circle
};
const isTriangleVariant = (type) => type === "PYRAMID" || type === "VERTICAL_FUNNEL";
const SmartBlockView = ({
  viewModel,
  themeSmartBlock,
  contentSlot,
  outerRef,
  outerClassName,
  overlayChildren,
  onTriangleShapeClick
}) => {
  const { type, columnSize, orientation, totalCells, blockBorder, cells } = viewModel;
  const wrapperVars = (0, import_react.useMemo)(
    () => (0, import_compute_block_css_vars.computeSmartBlockWrapperVars)(blockBorder, themeSmartBlock, type, totalCells),
    [
      blockBorder.borderColor,
      blockBorder.borderWidth,
      blockBorder.borderRadius,
      themeSmartBlock,
      type,
      totalCells
    ]
  );
  const variantClass = VARIANT_CLASSES[type] ?? VARIANT_CLASSES.SOLID_BOXES;
  const isCircleWithBottomCell = type === "CIRCLE" && (0, import_cell_position.hasBottomCenterCell)(totalCells);
  const sideRowCount = type === "CIRCLE" ? isCircleWithBottomCell ? (totalCells - 1) / 2 : Math.ceil(totalCells / 2) : 0;
  const circleInnerStyle = (0, import_react.useMemo)(() => {
    if (!isCircleWithBottomCell) {
      return void 0;
    }
    const sideRows = (totalCells - 1) / 2;
    const rowMin = `calc(var(--ricos-internal-sb-circle-size) / ${sideRows})`;
    return {
      gridTemplateRows: `repeat(${sideRows}, minmax(${rowMin}, 1fr)) auto`
    };
  }, [isCircleWithBottomCell, totalCells]);
  const isShapesMode = (0, import_react.useMemo)(() => !!cells && cells.some((c) => !!c.shape), [cells]);
  const slot = contentSlot({
    className: (0, import_classnames.default)(import_smart_block_view_scss.default.smartBlock, variantClass),
    "data-smart-block": true,
    "data-type": type,
    "data-column-size": columnSize,
    ...orientation ? { "data-orientation": orientation } : {},
    style: wrapperVars
  });
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: outerRef,
      className: (0, import_classnames.default)(import_smart_block_view_scss.default.smartBlockWrapper, outerClassName),
      "data-hook": import_data_hooks.DATA_HOOKS.SMART_BLOCK,
      style: wrapperVars
    },
    isTriangleVariant(type) && cells && /* @__PURE__ */ import_react.default.createElement(
      TriangleMobileStack,
      {
        variant: type,
        cells,
        themeSmartBlock,
        onTriangleShapeClick
      }
    ),
    type === "STAIRCASE" && cells && /* @__PURE__ */ import_react.default.createElement(
      StaircaseMobileStack,
      {
        cells,
        isShapesMode,
        themeSmartBlock
      }
    ),
    type === "CIRCLE" && cells ? /* @__PURE__ */ import_react.default.createElement("div", { className: import_smart_block_view_scss.default.circleInner, style: circleInnerStyle }, slot, /* @__PURE__ */ import_react.default.createElement(
      import_circle_donut.CircleDonut,
      {
        cells,
        themeAccentColor: themeSmartBlock?.accentColor,
        themeLabelColor: themeSmartBlock?.labelColor,
        isShapesMode,
        gridRow: `1 / span ${sideRowCount}`
      }
    )) : slot,
    overlayChildren
  );
};
function TriangleMobileStack({
  variant,
  cells,
  themeSmartBlock,
  onTriangleShapeClick
}) {
  const isShapesMode = cells.some((cell) => !!cell.shape);
  const stackClass = variant === "PYRAMID" ? import_smart_block_view_scss.default.pyramidMobileStack : import_smart_block_view_scss.default.verticalFunnelMobileStack;
  return (
    // Not aria-hidden: when the editor wires onTriangleShapeClick, each slice
    // hosts a focusable shape button. The visual marker (number/icon) inside
    // each slice still duplicates the cell content, but AT users can reach the
    // shape picker via the slice buttons just like sighted users do via hover.
    /* @__PURE__ */ import_react.default.createElement("div", { className: stackClass }, cells.map((cell, cellIndex) => /* @__PURE__ */ import_react.default.createElement(
      TriangleMobileSlice,
      {
        key: cellIndex,
        variant,
        cell,
        cellIndex,
        isShapesMode,
        themeSmartBlock,
        onTriangleShapeClick
      }
    )))
  );
}
function TriangleMobileSlice({
  variant,
  cell,
  cellIndex,
  isShapesMode,
  themeSmartBlock,
  onTriangleShapeClick
}) {
  const cellVars = (0, import_compute_cell_css_vars.computeSmartBlockCellVars)(
    { accentColor: cell.accentColor },
    themeSmartBlock,
    variant,
    cellIndex
  );
  const hasShape = !!cell.shape || isShapesMode;
  const cellId = cell.cellId;
  const isPyramid = variant === "PYRAMID";
  const sliceClass = isPyramid ? import_smart_block_view_scss.default.pyramidMobileSlice : import_smart_block_view_scss.default.verticalFunnelMobileSlice;
  const numberClass = isPyramid ? import_smart_block_view_scss.default.pyramidInnerNumber : import_smart_block_view_scss.default.verticalFunnelInnerNumber;
  const iconClass = isPyramid ? import_smart_block_view_scss.default.pyramidInnerIcon : import_smart_block_view_scss.default.verticalFunnelInnerIcon;
  const overlayPositionClass = isPyramid ? import_smart_block_view_scss.default.pyramidOverlayPosition : import_smart_block_view_scss.default.verticalFunnelOverlayPosition;
  const overlay = hasShape && onTriangleShapeClick && cellId ? /* @__PURE__ */ import_react.default.createElement(
    import_shape_overlay.ShapeOverlay,
    {
      overlayClassName: (0, import_classnames.default)(import_cell_accessory_scss.default.accessoryOverlay, overlayPositionClass),
      hasShape,
      onClick: (event) => onTriangleShapeClick(cellId, event)
    }
  ) : null;
  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(sliceClass, import_cell_accessory_scss.default.accessoryOverlayHost), style: cellVars }, /* @__PURE__ */ import_react.default.createElement(
    import_cell_marker.CellMarker,
    {
      shape: cell.shape,
      shapeColor: cell.shapeColor,
      isShapesMode,
      cellIndex,
      numberClassName: numberClass,
      iconClassName: iconClass
    }
  ), overlay);
}
const StaircaseMobileStack = ({ cells, isShapesMode, themeSmartBlock }) => {
  const onCellShapeClick = (0, import_smart_block_context.useSmartBlockEditorContext)()?.onCellShapeClick;
  const stackVars = { "--ricos-internal-sb-cols": cells.length };
  return (
    // Decorative in the viewer (markers duplicate the cell content) → hidden
    // from AT. In the editor each bar hosts a focusable shape button, so the
    // stack must stay reachable.
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: import_smart_block_view_scss.default.staircaseMobileStack,
        style: stackVars,
        "aria-hidden": onCellShapeClick ? void 0 : true
      },
      cells.map((cell, cellIndex) => /* @__PURE__ */ import_react.default.createElement(
        StaircaseMobileBar,
        {
          key: cell.cellId ?? cellIndex,
          cell,
          cellIndex,
          isShapesMode,
          themeSmartBlock
        }
      ))
    )
  );
};
const StaircaseMobileBar = ({ cell, cellIndex, isShapesMode, themeSmartBlock }) => {
  const onCellShapeClick = (0, import_smart_block_context.useSmartBlockEditorContext)()?.onCellShapeClick;
  const cellVars = (0, import_compute_cell_css_vars.computeSmartBlockCellVars)(
    { accentColor: cell.accentColor },
    themeSmartBlock,
    "STAIRCASE",
    cellIndex
  );
  const hasShape = !!cell.shape || isShapesMode;
  const cellId = cell.cellId;
  const overlay = hasShape && onCellShapeClick && cellId ? /* @__PURE__ */ import_react.default.createElement(
    import_shape_overlay.ShapeOverlay,
    {
      overlayClassName: import_cell_accessory_scss.default.accessoryOverlay,
      hasShape,
      onClick: (event) => onCellShapeClick(cellId, event)
    }
  ) : null;
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)(import_smart_block_view_scss.default.staircaseMobileBar, import_cell_accessory_scss.default.accessoryOverlayHost),
      style: cellVars
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_cell_marker.CellMarker,
      {
        shape: cell.shape,
        shapeColor: cell.shapeColor,
        isShapesMode,
        cellIndex,
        numberClassName: import_smart_block_view_scss.default.staircaseInnerNumber,
        iconClassName: import_smart_block_view_scss.default.staircaseInnerIcon
      }
    ),
    overlay
  );
};
//# sourceMappingURL=smart-block-view.js.map
