"use client";
import { jsx } from "react/jsx-runtime";
import { useEffect, useState, memo } from "react";
import { cx } from "@emotion/css";
import { Element } from "../components/Element";
import { getIndexes } from "../../../components/utils/columns";
import { useResponsiveStyle } from "../../../components/utils/responsive-style";
import { useStyle } from "../use-style";
import { pollBoxModel } from "../poll-box-model";
function renderSlot(props) {
  return /* @__PURE__ */ jsx(SlotValue, { ...props });
}
const SlotValue = memo(
  ({
    data,
    control
  }) => {
    if (data == null || data.elements.length === 0) {
      return /* @__PURE__ */ jsx(Slot.Placeholder, { control });
    }
    return /* @__PURE__ */ jsx(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ jsx(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ jsx(Element, { element }) }, element.key)) });
  }
);
function Slot({
  as,
  control,
  children,
  className,
  ...restOfProps
}) {
  const As = as ?? "div";
  const [element, setElement] = useState(null);
  const baseClassName = useStyle({
    display: "flex",
    flexWrap: "wrap",
    width: "100%"
  });
  useEffect(() => {
    if (element == null || control == null)
      return;
    return pollBoxModel({
      element,
      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
    });
  }, [element, control]);
  return /* @__PURE__ */ jsx(As, { ...restOfProps, ref: setElement, className: 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] = useState(null);
  const baseClassName = useStyle({
    display: "flex",
    ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {
      const [rowIndex, columnIndex] = getIndexes(spans, index);
      const span = spans[rowIndex][columnIndex];
      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
      return span === 0 ? { display: "none" } : { flexBasis, minWidth: flexBasis };
    })
  });
  useEffect(() => {
    if (element == null || control == null)
      return;
    return pollBoxModel({
      element,
      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
    });
  }, [element, control, index]);
  return /* @__PURE__ */ jsx(As, { ...restOfProps, ref: setElement, className: cx(baseClassName, className), children });
}
function SlotPlaceholder({ control }) {
  const [element, setElement] = useState(null);
  useEffect(() => {
    if (element == null || control == null)
      return;
    return pollBoxModel({
      element,
      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
    });
  }, [element, control]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: setElement,
      className: useStyle({
        width: "100%",
        background: "rgba(161, 168, 194, 0.18)",
        height: "80px"
      }),
      children: /* @__PURE__ */ jsx(
        "svg",
        {
          xmlns: "http://www.w3.org/2000/svg",
          width: "100%",
          height: "100%",
          className: useStyle({ overflow: "visible", padding: 8 }),
          children: /* @__PURE__ */ 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"
            }
          )
        }
      )
    }
  );
}
export {
  Slot,
  renderSlot
};
//# sourceMappingURL=slot.js.map