"use client";
import { jsxs as m, jsx as i } from "react/jsx-runtime";
import { createBlock as h } from "../../utils/index.js";
import { Popover as t } from "../shared/popover.js";
import { BuilderConfiguration as N } from "../../config/builder.config.js";
import { useAppDispatch as T } from "../../hooks/use-app-dispatch.js";
import { addBlocks as O } from "../../store/builder-slice.js";
import { Unit as w } from "../../types/style.js";
import { BlockType as d } from "../../types/block.js";
import { Breakpoint as s } from "../../types/responsive.js";
import { AiOutlineArrowDown as b, AiOutlineArrowRight as v } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
const D = [
  {
    size: [100],
    direction: "column",
    content: /* @__PURE__ */ i(b, { size: 20 })
  },
  { size: [100], direction: "row", content: /* @__PURE__ */ i(v, { size: 20 }) },
  { size: [50, 50], direction: "row" },
  { size: [33.33, 33.33, 33.33], direction: "row" },
  { size: [25, 25, 25, 25], direction: "row" },
  { size: [20, 20, 20, 20, 20], direction: "row" },
  { size: [16.66, 16.66, 16.66, 16.66, 16.66, 16.66], direction: "row" },
  { size: [30, 70], direction: "row" },
  { size: [70, 30], direction: "row" },
  { size: [60, 20, 20], direction: "row" },
  { size: [20, 20, 60], direction: "row" },
  { size: [20, 60, 20], direction: "row" }
], G = ({
  blockId: u = "root",
  children: f,
  position: g,
  onBlockAdded: c
}) => {
  var p;
  const C = T(), { settings: a, advancedSettings: l } = N.getBlock(
    d.CONTAINER
  ), z = ({ size: e, direction: o }) => {
    const r = h({
      type: d.CONTAINER,
      settings: {
        ...a,
        width: {
          [s.DESKTOP]: {
            unit: w.PERCENTAGE,
            value: 100
          }
        },
        flexDirection: {
          [s.DESKTOP]: o
        }
      },
      advancedSettings: l,
      parentId: u
    }), n = [];
    e.length > 1 && e.forEach((E) => {
      const x = h({
        type: d.CONTAINER,
        settings: {
          ...a,
          width: {
            [s.DESKTOP]: {
              unit: w.PERCENTAGE,
              value: E
            }
          },
          flexDirection: {
            [s.DESKTOP]: o
          }
        },
        advancedSettings: l,
        parentId: r.id
      });
      n.push(x);
    }), C(
      O({
        blocks: [r, ...n],
        selectedBlockId: r.id,
        index: g
      })
    ), c == null || c(r);
  };
  return /* @__PURE__ */ m(t, { modal: !0, children: [
    /* @__PURE__ */ i(t.Trigger, { asChild: !0, children: f }),
    /* @__PURE__ */ i(t.Portal, { container: ((p = window.frameDocument) == null ? void 0 : p.body) || document.body, children: /* @__PURE__ */ i(
      t.Content,
      {
        asChild: !0,
        sideOffset: 10,
        className: "w-[600px] rounded border border-slate-200 border-slate-300 bg-white p-4 shadow-sm",
        children: /* @__PURE__ */ m("div", { onClick: (e) => e.stopPropagation(), children: [
          /* @__PURE__ */ i("div", { className: "grid grid-cols-4 gap-4", children: D.map((e, o) => /* @__PURE__ */ i(t.Close, { asChild: !0, children: /* @__PURE__ */ i("div", { className: "group flex gap-[2px]", onClick: () => z(e), children: e.size.map((r, n) => /* @__PURE__ */ i(
            "div",
            {
              style: { width: `${r}%` },
              className: "flex h-[45px] cursor-pointer items-center justify-center rounded-[2px] bg-slate-200 text-white transition-colors duration-300 group-hover:bg-slate-300",
              children: e.content
            },
            n
          )) }) }, o)) }),
          /* @__PURE__ */ i(t.Arrow, { width: 20, height: 9, fill: "white" })
        ] })
      }
    ) })
  ] });
};
export {
  G as default
};
//# sourceMappingURL=add-container.js.map
