import classNames from "classnames";
import React, { useMemo } from "react";
import { DATA_HOOKS } from "../data-hooks.js";
import { hasBottomCenterCell } from "../utils/cell-position.js";
import { computeSmartBlockWrapperVars } from "../utils/compute-block-css-vars.js";
import { computeSmartBlockCellVars } from "../utils/compute-cell-css-vars.js";
import { useSmartBlockEditorContext } from "../utils/smart-block-context.js";
import accessoryStyles from "./cell-accessory-scss.js";
import { CellMarker } from "./cell-marker.js";
import { CircleDonut } from "./circle-donut.js";
import { ShapeOverlay } from "./shape-overlay.js";
import styles from "./smart-block-view-scss.js";
const VARIANT_CLASSES = {
  SOLID_BOXES: styles.solidBoxes,
  NUMBERED_BOXES: styles.numberedBoxes,
  STATS: styles.stats,
  BAR_STATS: styles.barStats,
  CIRCLE_STATS: styles.circleStats,
  SOLID_BOXES_ALTERNATING: styles.alternatingBoxes,
  SOLID_JOINED_BOXES: styles.solidJoinedBoxes,
  SIDE_LINE_TEXT: styles.sideLineText,
  TOP_LINE_TEXT: styles.topLineText,
  OUTLINE_BOXES_WITH_TOP_CIRCLE: styles.outlineBoxesWithTopCircle,
  BIG_BULLETS: styles.bigBullets,
  SMALL_BULLETS: styles.smallBullets,
  ARROW_BULLETS: styles.arrowBullets,
  PROCESS_STEPS: styles.processSteps,
  STAR_RATING: styles.starRating,
  QUOTE_BOXES: styles.quoteBoxes,
  TIMELINE: styles.timeline,
  MINIMAL_TIMELINE: styles.minimalTimeline,
  PILLS: styles.pills,
  PYRAMID: styles.pyramid,
  VERTICAL_FUNNEL: styles.verticalFunnel,
  STAIRCASE: styles.staircase,
  CIRCLE: styles.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 = useMemo(
    () => 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" && hasBottomCenterCell(totalCells);
  const sideRowCount = type === "CIRCLE" ? isCircleWithBottomCell ? (totalCells - 1) / 2 : Math.ceil(totalCells / 2) : 0;
  const circleInnerStyle = 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 = useMemo(() => !!cells && cells.some((c) => !!c.shape), [cells]);
  const slot = contentSlot({
    className: classNames(styles.smartBlock, variantClass),
    "data-smart-block": true,
    "data-type": type,
    "data-column-size": columnSize,
    ...orientation ? { "data-orientation": orientation } : {},
    style: wrapperVars
  });
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      ref: outerRef,
      className: classNames(styles.smartBlockWrapper, outerClassName),
      "data-hook": DATA_HOOKS.SMART_BLOCK,
      style: wrapperVars
    },
    isTriangleVariant(type) && cells && /* @__PURE__ */ React.createElement(
      TriangleMobileStack,
      {
        variant: type,
        cells,
        themeSmartBlock,
        onTriangleShapeClick
      }
    ),
    type === "STAIRCASE" && cells && /* @__PURE__ */ React.createElement(
      StaircaseMobileStack,
      {
        cells,
        isShapesMode,
        themeSmartBlock
      }
    ),
    type === "CIRCLE" && cells ? /* @__PURE__ */ React.createElement("div", { className: styles.circleInner, style: circleInnerStyle }, slot, /* @__PURE__ */ React.createElement(
      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" ? styles.pyramidMobileStack : styles.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__ */ React.createElement("div", { className: stackClass }, cells.map((cell, cellIndex) => /* @__PURE__ */ React.createElement(
      TriangleMobileSlice,
      {
        key: cellIndex,
        variant,
        cell,
        cellIndex,
        isShapesMode,
        themeSmartBlock,
        onTriangleShapeClick
      }
    )))
  );
}
function TriangleMobileSlice({
  variant,
  cell,
  cellIndex,
  isShapesMode,
  themeSmartBlock,
  onTriangleShapeClick
}) {
  const cellVars = computeSmartBlockCellVars(
    { accentColor: cell.accentColor },
    themeSmartBlock,
    variant,
    cellIndex
  );
  const hasShape = !!cell.shape || isShapesMode;
  const cellId = cell.cellId;
  const isPyramid = variant === "PYRAMID";
  const sliceClass = isPyramid ? styles.pyramidMobileSlice : styles.verticalFunnelMobileSlice;
  const numberClass = isPyramid ? styles.pyramidInnerNumber : styles.verticalFunnelInnerNumber;
  const iconClass = isPyramid ? styles.pyramidInnerIcon : styles.verticalFunnelInnerIcon;
  const overlayPositionClass = isPyramid ? styles.pyramidOverlayPosition : styles.verticalFunnelOverlayPosition;
  const overlay = hasShape && onTriangleShapeClick && cellId ? /* @__PURE__ */ React.createElement(
    ShapeOverlay,
    {
      overlayClassName: classNames(accessoryStyles.accessoryOverlay, overlayPositionClass),
      hasShape,
      onClick: (event) => onTriangleShapeClick(cellId, event)
    }
  ) : null;
  return /* @__PURE__ */ React.createElement("div", { className: classNames(sliceClass, accessoryStyles.accessoryOverlayHost), style: cellVars }, /* @__PURE__ */ React.createElement(
    CellMarker,
    {
      shape: cell.shape,
      shapeColor: cell.shapeColor,
      isShapesMode,
      cellIndex,
      numberClassName: numberClass,
      iconClassName: iconClass
    }
  ), overlay);
}
const StaircaseMobileStack = ({ cells, isShapesMode, themeSmartBlock }) => {
  const onCellShapeClick = 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__ */ React.createElement(
      "div",
      {
        className: styles.staircaseMobileStack,
        style: stackVars,
        "aria-hidden": onCellShapeClick ? void 0 : true
      },
      cells.map((cell, cellIndex) => /* @__PURE__ */ React.createElement(
        StaircaseMobileBar,
        {
          key: cell.cellId ?? cellIndex,
          cell,
          cellIndex,
          isShapesMode,
          themeSmartBlock
        }
      ))
    )
  );
};
const StaircaseMobileBar = ({ cell, cellIndex, isShapesMode, themeSmartBlock }) => {
  const onCellShapeClick = useSmartBlockEditorContext()?.onCellShapeClick;
  const cellVars = computeSmartBlockCellVars(
    { accentColor: cell.accentColor },
    themeSmartBlock,
    "STAIRCASE",
    cellIndex
  );
  const hasShape = !!cell.shape || isShapesMode;
  const cellId = cell.cellId;
  const overlay = hasShape && onCellShapeClick && cellId ? /* @__PURE__ */ React.createElement(
    ShapeOverlay,
    {
      overlayClassName: accessoryStyles.accessoryOverlay,
      hasShape,
      onClick: (event) => onCellShapeClick(cellId, event)
    }
  ) : null;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames(styles.staircaseMobileBar, accessoryStyles.accessoryOverlayHost),
      style: cellVars
    },
    /* @__PURE__ */ React.createElement(
      CellMarker,
      {
        shape: cell.shape,
        shapeColor: cell.shapeColor,
        isShapesMode,
        cellIndex,
        numberClassName: styles.staircaseInnerNumber,
        iconClassName: styles.staircaseInnerIcon
      }
    ),
    overlay
  );
};
export {
  SmartBlockView
};
//# sourceMappingURL=smart-block-view.js.map
