"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var slot_exports = {};
__export(slot_exports, {
  Slot: () => Slot,
  renderSlot: () => renderSlot
});
module.exports = __toCommonJS(slot_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_css = require("@emotion/css");
var import_Element = require("../components/Element");
var import_columns = require("../../../components/utils/columns");
var import_responsive_style = require("../../../components/utils/responsive-style");
var import_use_style = require("../use-style");
var import_poll_box_model = require("../poll-box-model");
function renderSlot(props) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotValue, { ...props });
}
const SlotValue = (0, import_react.memo)(
  ({
    data,
    control
  }) => {
    if (data == null || data.elements.length === 0) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Placeholder, { control });
    }
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Element.Element, { element }) }, element.key)) });
  }
);
function Slot({
  as,
  control,
  children,
  className,
  ...restOfProps
}) {
  const As = as ?? "div";
  const [element, setElement] = (0, import_react.useState)(null);
  const baseClassName = (0, import_use_style.useStyle)({
    display: "flex",
    flexWrap: "wrap",
    width: "100%"
  });
  (0, import_react.useEffect)(() => {
    if (element == null || control == null)
      return;
    return (0, import_poll_box_model.pollBoxModel)({
      element,
      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
    });
  }, [element, control]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(As, { ...restOfProps, ref: setElement, className: (0, import_css.cx)(baseClassName, className), children });
}
Slot.Placeholder = SlotPlaceholder;
Slot.Item = SlotItem;
function SlotItem({
  as,
  control,
  grid,
  index,
  children,
  className,
  ...restOfProps
}) {
  const As = as ?? "div";
  const [element, setElement] = (0, import_react.useState)(null);
  const baseClassName = (0, import_use_style.useStyle)({
    display: "flex",
    ...(0, import_responsive_style.useResponsiveStyle)([grid], ([{ count = 12, spans = [[12]] } = {}]) => {
      const [rowIndex, columnIndex] = (0, import_columns.getIndexes)(spans, index);
      const span = spans[rowIndex][columnIndex];
      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
      return span === 0 ? { display: "none" } : { flexBasis, minWidth: flexBasis };
    })
  });
  (0, import_react.useEffect)(() => {
    if (element == null || control == null)
      return;
    return (0, import_poll_box_model.pollBoxModel)({
      element,
      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
    });
  }, [element, control, index]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(As, { ...restOfProps, ref: setElement, className: (0, import_css.cx)(baseClassName, className), children });
}
function SlotPlaceholder({ control }) {
  const [element, setElement] = (0, import_react.useState)(null);
  (0, import_react.useEffect)(() => {
    if (element == null || control == null)
      return;
    return (0, import_poll_box_model.pollBoxModel)({
      element,
      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
    });
  }, [element, control]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ref: setElement,
      className: (0, import_use_style.useStyle)({
        width: "100%",
        background: "rgba(161, 168, 194, 0.18)",
        height: "80px"
      }),
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "svg",
        {
          xmlns: "http://www.w3.org/2000/svg",
          width: "100%",
          height: "100%",
          className: (0, import_use_style.useStyle)({ overflow: "visible", padding: 8 }),
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            "rect",
            {
              x: 0,
              y: 0,
              width: "100%",
              height: "100%",
              strokeWidth: 2,
              strokeDasharray: "4 2",
              fill: "none",
              stroke: "rgba(161, 168, 194, 0.40)",
              rx: "4",
              ry: "4"
            }
          )
        }
      )
    }
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Slot,
  renderSlot
});
//# sourceMappingURL=slot.js.map