"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_cell_view_exports = {};
__export(smart_block_cell_view_exports, {
  SmartBlockCellView: () => SmartBlockCellView
});
module.exports = __toCommonJS(smart_block_cell_view_exports);
var import_wix_ui_icons_common = require("@wix/wix-ui-icons-common");
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_extension = require("./../../ricos-common-plugins/title/extension.js");
var import_shape_view_renderer = require("./../../_shared/shape-view-renderer.js");
var import_consts = require("./../../_shared/shape-view-renderer/consts.js");
var import_data_hooks = require("../data-hooks.js");
var import_cell_position = require("../utils/cell-position.js");
var import_compute_cell_css_vars = require("../utils/compute-cell-css-vars.js");
var import_resolve_shape_src = require("../utils/resolve-shape-src.js");
var import_smart_block_context = require("../utils/smart-block-context.js");
var import_variant_features = require("../utils/variant-features.js");
var import_cell_accessory_scss = __toESM(require("./cell-accessory-scss.js"));
var import_cell_marker = require("./cell-marker.js");
var import_cell_quote_glyph = require("./cell-quote-glyph.js");
var import_cell_star_rating = require("./cell-star-rating.js");
var import_cell_stat = require("./cell-stat.js");
var import_shape_overlay = require("./shape-overlay.js");
var import_smart_block_view_scss = __toESM(require("./smart-block-view-scss.js"));
const SmartBlockCellView = ({
  viewModel,
  themeSmartBlock,
  contentSlot,
  outerRef,
  outerClassName,
  extraAttrs,
  overlayChildren
}) => {
  const {
    type,
    cellIndex,
    totalCells,
    columnSize,
    orientation,
    cellId,
    cellColors,
    shape,
    shapeColor,
    label,
    contentStyle,
    isShapesMode
  } = viewModel;
  const cellDesignVars = (0, import_react.useMemo)(
    () => (0, import_compute_cell_css_vars.computeSmartBlockCellVars)(cellColors, themeSmartBlock, type, cellIndex, orientation),
    [
      cellColors.accentColor,
      cellColors.backgroundColor,
      cellColors.borderColor,
      cellColors.borderWidth,
      cellColors.borderRadius,
      themeSmartBlock,
      type,
      cellIndex,
      orientation
    ]
  );
  const cellPositionAttrs = (0, import_react.useMemo)(
    () => (0, import_cell_position.getCellPositionDataAttrs)(cellIndex, totalCells, columnSize),
    [cellIndex, totalCells, columnSize]
  );
  const circleStyle = (0, import_react.useMemo)(
    () => type === "CIRCLE" ? (0, import_cell_position.getCircleCellStyle)(cellIndex, totalCells) : null,
    [type, cellIndex, totalCells]
  );
  const onShapeClick = (0, import_smart_block_context.useSmartBlockCellEditorContext)()?.onShapeClick;
  const hasShape = !!shape || isShapesMode;
  const shapeSrc = hasShape ? (0, import_resolve_shape_src.resolveShapeSrc)(shape) : void 0;
  const shapeColors = shapeColor ? { [import_consts.DEFAULT_COLOR]: shapeColor } : {};
  const shapeContent = shapeSrc ? /* @__PURE__ */ import_react.default.createElement(
    import_shape_view_renderer.ShapeViewRenderer,
    {
      shapeSrc,
      colors: shapeColors,
      hideLoadingOverlay: true,
      preserveAspectRatio: "xMidYMid meet",
      style: { width: "100%", height: "100%" }
    }
  ) : null;
  const overlay = hasShape && onShapeClick ? /* @__PURE__ */ import_react.default.createElement(
    import_shape_overlay.ShapeOverlay,
    {
      overlayClassName: import_cell_accessory_scss.default.accessoryOverlay,
      hasShape,
      onClick: onShapeClick
    }
  ) : null;
  const defaultMarker = /* @__PURE__ */ import_react.default.createElement(
    import_cell_marker.CellMarker,
    {
      shape,
      shapeColor,
      isShapesMode,
      cellIndex
    }
  );
  const mergedStyle = circleStyle ? { ...cellDesignVars, ...circleStyle.style } : cellDesignVars;
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: outerRef,
      className: (0, import_classnames.default)(import_smart_block_view_scss.default.smartBlockCell, outerClassName, {
        [import_smart_block_view_scss.default.bulletCell]: (0, import_variant_features.isBulletVariant)(type)
      }),
      "data-hook": import_data_hooks.DATA_HOOKS.SMART_BLOCK_CELL,
      "data-smart-block-cell": cellId ?? true,
      style: mergedStyle,
      ...cellPositionAttrs,
      ...circleStyle ? { "data-circle-side": circleStyle.side } : {},
      ...extraAttrs
    },
    (() => {
      switch (type) {
        case "NUMBERED_BOXES": {
          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.numberedBand }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.accessoryFrame }, defaultMarker, overlay));
        }
        case "OUTLINE_BOXES_WITH_TOP_CIRCLE": {
          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.circleRail }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.circleSlot }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.accessoryFrame }, defaultMarker), overlay));
        }
        case "PROCESS_STEPS": {
          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.processRow }, /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative" } }, shapeContent ? /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.processIcon }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 24, height: 24 } }, shapeContent)) : /* @__PURE__ */ import_react.default.createElement("span", { className: import_cell_accessory_scss.default.processNumber }, String(cellIndex + 1).padStart(2, "0")), overlay), /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.processLine }));
        }
        case "TIMELINE": {
          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.timelineChip }, shapeContent ? /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.timelineIcon }, shapeContent) : /* @__PURE__ */ import_react.default.createElement("span", { className: import_cell_accessory_scss.default.timelineNumber }, cellIndex + 1), overlay);
        }
        case "MINIMAL_TIMELINE": {
          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.minimalTimelineDot });
        }
        case "PILLS": {
          return /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: orientation === "VERTICAL" ? import_cell_accessory_scss.default.pillVertical : (0, import_classnames.default)(import_cell_accessory_scss.default.pill, import_cell_accessory_scss.default.numberedBand)
            },
            /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.accessoryFrame }, defaultMarker),
            overlay
          );
        }
        case "BIG_BULLETS": {
          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.bulletInline }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.bulletFrame }, defaultMarker, overlay));
        }
        case "ARROW_BULLETS": {
          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.bulletInline }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.bulletFrame }, shapeContent ? /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.accessoryIcon }, shapeContent) : /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ChevronRight, { className: import_cell_accessory_scss.default.bulletArrow }), overlay));
        }
        case "STATS":
        case "BAR_STATS":
        case "CIRCLE_STATS": {
          return /* @__PURE__ */ import_react.default.createElement(import_cell_stat.CellStat, { type, label });
        }
        case "STAR_RATING": {
          return /* @__PURE__ */ import_react.default.createElement(import_cell_star_rating.CellStarRating, { label });
        }
        case "QUOTE_BOXES": {
          return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_cell_quote_glyph.CellQuoteGlyph, { position: "open" }), /* @__PURE__ */ import_react.default.createElement(import_cell_quote_glyph.CellQuoteGlyph, { position: "close" }));
        }
        case "PYRAMID":
        case "VERTICAL_FUNNEL": {
          const isPyramid = type === "PYRAMID";
          const sliceClass = isPyramid ? import_smart_block_view_scss.default.pyramidSlice : import_smart_block_view_scss.default.verticalFunnelSlice;
          const innerNumberClass = isPyramid ? import_smart_block_view_scss.default.pyramidInnerNumber : import_smart_block_view_scss.default.verticalFunnelInnerNumber;
          const innerIconClass = 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 sliceOverlay = hasShape && onShapeClick ? /* @__PURE__ */ import_react.default.createElement(
            import_shape_overlay.ShapeOverlay,
            {
              overlayClassName: (0, import_classnames.default)(
                import_cell_accessory_scss.default.accessoryOverlay,
                overlayPositionClass
              ),
              hasShape,
              onClick: onShapeClick
            }
          ) : null;
          return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(sliceClass, import_cell_accessory_scss.default.accessoryOverlayHost) }, /* @__PURE__ */ import_react.default.createElement(
            import_cell_marker.CellMarker,
            {
              shape,
              shapeColor,
              isShapesMode,
              cellIndex,
              numberClassName: innerNumberClass,
              iconClassName: innerIconClass
            }
          ), sliceOverlay), /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: (0, import_classnames.default)(
                import_smart_block_view_scss.default.smartBlockMobileChip,
                import_cell_accessory_scss.default.accessoryOverlayHost
              )
            },
            defaultMarker,
            overlay
          ));
        }
        case "CIRCLE": {
          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_cell_accessory_scss.default.bulletInline, "data-circle-bullet": true }, /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: (0, import_classnames.default)(import_smart_block_view_scss.default.circleBadge, import_cell_accessory_scss.default.accessoryOverlayHost)
            },
            /* @__PURE__ */ import_react.default.createElement(
              import_cell_marker.CellMarker,
              {
                shape,
                shapeColor,
                isShapesMode,
                cellIndex,
                iconClassName: import_smart_block_view_scss.default.circleBadgeIcon
              }
            ),
            overlay
          ));
        }
        case "STAIRCASE": {
          return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: (0, import_classnames.default)(import_smart_block_view_scss.default.staircaseBar, import_cell_accessory_scss.default.accessoryOverlayHost)
            },
            /* @__PURE__ */ import_react.default.createElement(
              import_cell_marker.CellMarker,
              {
                shape,
                shapeColor,
                isShapesMode,
                cellIndex,
                numberClassName: import_smart_block_view_scss.default.staircaseInnerNumber,
                iconClassName: import_smart_block_view_scss.default.staircaseInnerIcon
              }
            ),
            overlay
          ), /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: (0, import_classnames.default)(
                import_smart_block_view_scss.default.smartBlockMobileChip,
                import_cell_accessory_scss.default.accessoryOverlayHost
              )
            },
            defaultMarker,
            overlay
          ));
        }
        default:
          return null;
      }
    })(),
    contentSlot({
      className: import_smart_block_view_scss.default.smartBlockCellContent,
      "data-smart-block-content": "",
      style: contentStyle.fontSize ? { fontSize: contentStyle.fontSize } : void 0,
      ...contentStyle.headingLevel ? { "data-heading-level": `header${import_extension.HEADER_NAMES[contentStyle.headingLevel - 1]}` } : {}
    }),
    overlayChildren
  );
};
//# sourceMappingURL=smart-block-cell-view.js.map
