import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { useEditorHelpers as V, useSelectedSectionId as L, useSelectedBrickId as z } from "../../../../../use-editor.js";
import { a as B } from "../../../../sdk/dist/shared/chunk-AQPN5SE2.js";
import "../../../../sdk/dist/shared/chunk-DQXDGV67.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-7DMUDZ4H.js";
import "../../../../sdk/dist/shared/chunk-LSPN22SI.js";
import "../../../../sdk/dist/shared/chunk-ETYYRWLK.js";
import "../../../../sdk/dist/shared/chunk-4TH3C76A.js";
import "../../../../sdk/dist/shared/chunk-FKNNTHWX.js";
import "../../../../sdk/dist/shared/chunk-JS4K5JRM.js";
import "../../../../sdk/dist/shared/chunk-WU6Q4WYD.js";
import "../../../../sdk/dist/shared/chunk-QISTDGPP.js";
import "../../../../sdk/dist/shared/chunk-LFQZRGHS.js";
import "../../../../sdk/dist/shared/chunk-SLRU4CT6.js";
import "../../../../sdk/dist/shared/chunk-TTTXV7TJ.js";
import "../../../../sdk/dist/shared/chunk-UHF6IEKV.js";
import "../../../../sdk/dist/shared/chunk-LGP6GWIY.js";
import "../../../../sdk/dist/shared/chunk-X43MB5WD.js";
import "../../../../sdk/dist/shared/chunk-NNI225RG.js";
import "../../../../sdk/dist/shared/chunk-ZQGNYK5I.js";
import "../../../../sdk/dist/shared/chunk-KHFNN4P3.js";
import "../../../../sdk/dist/shared/chunk-BZGNY7LB.js";
import "../../../../sdk/dist/shared/chunk-IIFTGWFZ.js";
import "../../../../sdk/dist/shared/chunk-UU2MSQXY.js";
import "../../../../sdk/dist/shared/chunk-T3LIA4YB.js";
import "../../../../sdk/dist/shared/chunk-YBGPPF7T.js";
import "../../../../sdk/dist/shared/chunk-UMHXXXVP.js";
import "../../../../sdk/dist/shared/chunk-5N6MBJJ4.js";
import { tx as l, css as A } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle as U } from "./PanelBlockTitle.js";
import { useState as q, useRef as P, useEffect as D } from "react";
import { RxDragHandleHorizontal as H } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/rx/index.js";
import { HelpIcon as O } from "./json-form/HelpIcon.js";
import { DragDropContext as W, Droppable as N, Draggable as $ } from "../../../../../node_modules/.pnpm/@hello-pangea_dnd@18.0.1_@types_react@18.3.3_react-dom@18.3.0-canary-3d9b20132-20240124_f84299e6e55021d5dd75941266a1f9fa/node_modules/@hello-pangea/dnd/dist/dnd.esm.js";
import { useSections as F, useDraftHelpers as M } from "../../../../../use-page-data.js";
function Ne({
  brick: p,
  className: c = "h-[calc(50cqh-58px)]"
}) {
  const { setSelectedBrickId: b, setSelectedSectionId: I } = V(), g = F(), u = L(), R = z(), y = M(), [x, C] = q(), d = P(null), v = P(null), S = P(null);
  D(() => {
    const n = u ?? R;
    if (n) {
      const r = document.getElementById(`hierarchy_${n}`);
      r && "scrollIntoViewIfNeeded" in r && typeof r?.scrollIntoViewIfNeeded == "function" ? r.scrollIntoViewIfNeeded({ behavior: "smooth", block: "center" }) : r && r.scrollIntoView({
        behavior: "smooth",
        block: "center"
      });
    }
  }, [u, R]), D(() => {
    v.current = document.getElementById("page-container");
  }, []), D(() => {
    d.current && d.current.classList.remove(l("outline-upstart-400")), x && (d.current = document.getElementById(x.id), d.current && (d.current.classList.add(l("outline-upstart-400")), v.current && !G(d.current, v.current) && d.current.scrollIntoView({ behavior: "smooth", block: "nearest" })));
  }, [x]);
  function k({
    bricks: n,
    level: r = 0,
    // currentIndex = -1,
    isChild: o = !1
  }) {
    return n.map((t, f) => {
      const a = "$children" in t.props ? t.props.$children : [], i = a.length > 0, s = B[t.type].isContainer, j = B[t.type].icon, w = B[t.type].name;
      return /* @__PURE__ */ e.jsx($, { draggableId: `hierarchy_${t.id}`, index: f, children: (h, E) => /* @__PURE__ */ e.jsx(
        "div",
        {
          ref: h.innerRef,
          ...h.draggableProps,
          className: l("min-h-fit flex flex-col gap-2", s && "mt-1 mr-1 ml-1 last:mb-1"),
          children: /* @__PURE__ */ e.jsxs(
            "div",
            {
              id: `hierarchy_${t.id}`,
              "data-element-type": "brick",
              "data-brick-type": t.type,
              "data-level": r,
              "data-has-children": i,
              className: l(
                "select-none cursor-pointer flex flex-col ",
                // level > 0 || (hasChildren && "ml-1.5"),
                s && "rounded outline outline-2 min-h-fit",
                s ? p?.id === t.id ? "outline-orange-300 " : "outline-transparent hover:(outline-orange-200)" : p?.id === t.id ? "outline-upstart-400 " : "outline-transparent hover:(outline-upstart-100)",
                E.isDragging && "outline outline-2 outline-upstart-400 bg-upstart-100"
              ),
              children: [
                /* @__PURE__ */ e.jsxs(
                  "div",
                  {
                    className: l(
                      `flex items-center justify-between group/${t.id} transition-all py-1 px-1.5`,
                      (o || r === 0) && A({
                        paddingLeft: `${(r + 1) * 10}px`
                      }),
                      s ? p?.id === t.id ? "bg-orange-300 text-white font-bold" : "hover:bg-orange-50" : p?.id === t.id ? "bg-upstart-500 text-white font-bold" : "hover:bg-upstart-50"
                    ),
                    onClick: (m) => {
                      m.stopPropagation(), m.preventDefault(), b(t.id), I(), document.getElementById(t.id)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
                    },
                    children: [
                      /* @__PURE__ */ e.jsxs("span", { className: "inline-flex items-center gap-1.5 select-none", children: [
                        /* @__PURE__ */ e.jsx(j, { className: "w-4 h-4" }),
                        " ",
                        w
                      ] }),
                      /* @__PURE__ */ e.jsx("div", { ...h.dragHandleProps, children: /* @__PURE__ */ e.jsx(
                        H,
                        {
                          className: `w-5 h-5 cursor-row-resize opacity-0 group-hover/${t.id}:opacity-80 transition-opacity`
                        }
                      ) })
                    ]
                  }
                ),
                a.length > 0 && /* @__PURE__ */ e.jsx(
                  N,
                  {
                    droppableId: `hierarchy_${t.id}`,
                    direction: "vertical",
                    children: (m) => /* @__PURE__ */ e.jsxs(
                      "div",
                      {
                        ref: m.innerRef,
                        ...m.droppableProps,
                        className: l("hierarchy-container"),
                        children: [
                          /* @__PURE__ */ e.jsx(k, { bricks: a, level: r + 1, isChild: !0 }),
                          m.placeholder
                        ]
                      }
                    )
                  }
                )
              ]
            }
          )
        },
        t.id
      ) }, `hierarchy_${t.id}`);
    });
  }
  const _ = (n) => {
    const { source: r, destination: o, type: t, draggableId: f } = n;
    if (S.current = null, o) {
      const i = n.draggableId.replace(/^hierarchy_/, "");
      let { droppableId: s, index: j } = o;
      s = s.replace(/^hierarchy_/, "");
      let { droppableId: w } = r;
      if (w = w.replace(/^hierarchy_/, ""), s === "main-hierarchy") {
        const h = Array.from(g), [E] = h.splice(r.index, 1);
        h.splice(o.index, 0, E), y.reorderSections(h.map((m) => m.id));
      } else t === "brick-hierarchy" || t === "DEFAULT" ? w === s ? (console.log("Reordering brick within the same section/parent", n), y.reorderBrickWithin(i, j)) : g.some((E) => E.id === s) ? y.moveBrickToSection(i, s, j) : y.moveBrickToContainerBrick(i, s, j) : (console.warn("Unhandled drag type:", t), console.warn("Result:", n));
    }
    const a = document.getElementById(f);
    if (a?.style.removeProperty("z-index"), a?.dataset.elementType === "section")
      a.querySelectorAll(".hierarchy-container").forEach((s) => {
        s.style.removeProperty("display"), s.style.removeProperty("z-index");
      });
    else if (a?.dataset.hasChildren === "true") {
      const i = a.lastElementChild;
      i && (i.style.removeProperty("display"), i.style.removeProperty("z-index"));
    }
  }, T = (n) => {
    S.current = n.draggableId;
    const r = document.getElementById(n.draggableId);
    console.log("BEFORE CAPTURE", { cap: n, dataset: r?.dataset }), r?.style.setProperty("z-index", "9999"), r?.dataset.elementType === "section" ? r.querySelectorAll(".hierarchy-container").forEach((t) => {
      t.style.setProperty("display", "none", "important");
    }) : r?.dataset.hasChildren === "true" && r.lastElementChild?.style.setProperty("display", "none", "important");
  };
  return /* @__PURE__ */ e.jsxs("div", { className: l("grow shrink-0 bg-red", c), onMouseLeave: () => C(void 0), children: [
    /* @__PURE__ */ e.jsxs(U, { className: "border-t", children: [
      /* @__PURE__ */ e.jsx("span", { children: "Hierarchy" }),
      /* @__PURE__ */ e.jsx(
        O,
        {
          help: `View and manage the hierarchy of sections and bricks on this page. Click on a section or brick to select it.
Drag and drop sections and bricks to reorder them.
          `
        }
      )
    ] }),
    /* @__PURE__ */ e.jsx(W, { onDragEnd: _, onBeforeCapture: T, children: /* @__PURE__ */ e.jsx(N, { droppableId: "main-hierarchy", type: "hierarchy-section", direction: "vertical", children: (n, r) => /* @__PURE__ */ e.jsxs(
      "div",
      {
        ref: n.innerRef,
        className: l(
          "flex flex-col gap-1 py-2 pt-1 px-1 text-sm text-[80%] scrollbar-thin max-h-[calc(100%-38px)] overflow-y-auto"
        ),
        ...n.droppableProps,
        children: [
          g.map((o, t) => /* @__PURE__ */ e.jsx(
            $,
            {
              draggableId: `hierarchy_${o.id}`,
              index: t,
              children: (f, a) => /* @__PURE__ */ e.jsxs(
                "div",
                {
                  id: `hierarchy_${o.id}`,
                  "data-element-type": "section",
                  ref: f.innerRef,
                  ...f.draggableProps,
                  className: l(
                    "rounded group mt-1 outline outline-2 outline-transparent",
                    a.isDragging && "outline-upstart-400 bg-upstart-100",
                    o.id === u ? "outline-upstart-400" : "hover:(outline-upstart-100)"
                  ),
                  children: [
                    /* @__PURE__ */ e.jsxs(
                      "div",
                      {
                        className: l(
                          "py-1 px-1.5 rounded-t select-none flex justify-between items-center group min-h-fit",
                          o.id === u ? "bg-upstart-500 text-white font-bold cursor-default" : "hover:bg-upstart-50 cursor-pointer"
                        ),
                        onClick: (i) => {
                          if (i.defaultPrevented) {
                            console.log(
                              "Event was already handled, skipping click action on section hierarchy"
                            );
                            return;
                          }
                          i.preventDefault(), b(), I(o.id), document.getElementById(o.id)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
                        },
                        children: [
                          /* @__PURE__ */ e.jsxs("span", { children: [
                            "Section ",
                            o.label ?? "Unnamed"
                          ] }),
                          /* @__PURE__ */ e.jsx("div", { ...f.dragHandleProps, children: /* @__PURE__ */ e.jsx(H, { className: "w-5 h-5 cursor-row-resize opacity-0 group-hover:opacity-80 transition-opacity" }) })
                        ]
                      }
                    ),
                    /* @__PURE__ */ e.jsx(N, { droppableId: `hierarchy_${o.id}`, type: "brick-hierarchy", children: (i) => /* @__PURE__ */ e.jsxs(
                      "div",
                      {
                        ref: i.innerRef,
                        ...i.droppableProps,
                        className: l("hierarchy-container"),
                        children: [
                          /* @__PURE__ */ e.jsx(k, { bricks: o.bricks }),
                          o.bricks.length === 0 && /* @__PURE__ */ e.jsx(
                            "div",
                            {
                              className: l(
                                "w-full h-full px-2 py-1.5 flex items-center text-gray-500 font-normal"
                              ),
                              children: "No bricks in this section."
                            }
                          ),
                          i.placeholder
                        ]
                      }
                    ) })
                  ]
                },
                o.id
              )
            },
            `hierarchy_${o.id}`
          )),
          n.placeholder
        ]
      }
    ) }) })
  ] });
}
function G(p, c) {
  const b = p.getBoundingClientRect(), I = c.getBoundingClientRect(), g = b.top - I.top + c.scrollTop, u = b.left - I.left + c.scrollLeft, R = g + p.offsetHeight, y = u + p.offsetWidth, x = c.scrollTop, C = c.scrollLeft, d = x + c.clientHeight, v = C + c.clientWidth;
  return R > x && g < d && y > C && u < v;
}
export {
  Ne as default
};
//# sourceMappingURL=PageHierarchy.js.map
