"use client";
import { jsx as t, jsxs as a } from "react/jsx-runtime";
import { ScrollArea as L } from "../../shared/scroll-area.js";
import { BuilderConfiguration as B } from "../../../config/builder.config.js";
import { useActionContext as w } from "../../../contexts/action-context.js";
import { selectBlock as E, duplicateBlock as A, removeBlock as D } from "../../../store/builder-slice.js";
import { getContentRoot as M, getBlock as P, getSelectedBlock as R, getIsAnyChildSelected as q } from "../../../../../../store/selectors.js";
import { useAppDispatch as z } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as d } from "../../../hooks/use-app-selector.js";
import { BuilderRightPanelType as F } from "../../../store/app-slice.js";
import { classNames as l } from "../../../utils/index.js";
import { useState as j, useCallback as $, useEffect as b } from "react";
import { BsQuestionCircle as T } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FiLayers as k, FiX as O, FiChevronRight as Q, FiTrash2 as U } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { IoDuplicateOutline as X } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/io5/index.js";
const g = ({ blockId: r, index: c }) => {
  const s = z(), m = d(P(r)), n = B.getBlock(m.type), o = d(R), [u, p] = j(!0), f = (o == null ? void 0 : o.id) === r, h = d(q(r)), v = (e) => {
    e.stopPropagation(), p((i) => !i);
  }, x = $(
    (e) => {
      e.stopPropagation(), n && s(E(r));
    },
    [r, s]
  ), y = (e) => {
    e.stopPropagation(), s(A({ blockId: r }));
  }, N = (e) => {
    e.stopPropagation(), s(D(r));
  }, C = () => {
    if (!((o == null ? void 0 : o.id) === r || typeof document > "u"))
      try {
        const e = document.querySelector("iframe");
        if (!e || !e.contentDocument) return;
        const i = e.contentDocument.querySelector(
          `[data-block-id="${r}"]`
        );
        if (!i) return;
        i.classList.contains("after:ring-inset") ? i.classList.add("after:ring-1", "after:ring-slate-800") : i.classList.add("ring-1", "ring-slate-800");
      } catch (e) {
        console.error("Error in handleMouseEnter:", e);
      }
  }, S = () => {
    if (!((o == null ? void 0 : o.id) === r || typeof document > "u"))
      try {
        const e = document.querySelector("iframe");
        if (!e || !e.contentDocument) return;
        const i = e.contentDocument.querySelector(
          `[data-block-id="${r}"]`
        );
        if (!i) return;
        i.classList.contains("after:ring-inset") ? i.classList.remove("after:ring-1", "after:ring-slate-800") : i.classList.remove("ring-1", "ring-slate-800");
      } catch (e) {
        console.error("Error in handleMouseLeave:", e);
      }
  };
  return b(() => (h && p(!1), () => {
    p(!0);
  }), [h]), /* @__PURE__ */ a(
    "div",
    {
      className: l({
        "bg-slate-50": f
      }),
      children: [
        /* @__PURE__ */ a(
          "div",
          {
            onMouseEnter: C,
            onMouseLeave: S,
            onClick: x,
            className: l(
              "group flex cursor-pointer items-center py-3 pe-4 transition-colors duration-150",
              f ? "bg-slate-100" : "hover:bg-slate-100"
            ),
            style: {
              paddingInlineStart: c === 1 ? "10px" : `${c * 16}px`
            },
            children: [
              /* @__PURE__ */ t(
                "div",
                {
                  onClick: v,
                  className: l("me-2 h-full cursor-pointer transition-all duration-200", {
                    "rotate-90": !u,
                    invisible: !m.children.length
                  }),
                  children: /* @__PURE__ */ t(Q, { size: 16 })
                }
              ),
              /* @__PURE__ */ a("div", { className: l("flex w-full items-center gap-1.5 "), children: [
                n != null && n.icon ? /* @__PURE__ */ t(n.icon, {}) : /* @__PURE__ */ t(T, {}),
                /* @__PURE__ */ t("span", { children: (n == null ? void 0 : n.label) ?? "Unsupported Block" }),
                /* @__PURE__ */ a("div", { className: "ms-auto hidden items-center gap-2 group-hover:flex", children: [
                  n && /* @__PURE__ */ t(
                    X,
                    {
                      size: 14,
                      onClick: y,
                      className: "text-slate-600 hover:text-slate-900"
                    }
                  ),
                  /* @__PURE__ */ t(U, { size: 14, onClick: N, className: "text-slate-600 hover:text-slate-900" })
                ] })
              ] })
            ]
          }
        ),
        m.children.length > 0 && /* @__PURE__ */ t(
          "div",
          {
            className: l(
              "grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-200",
              {
                "grid-rows-[1fr]": !u
              }
            ),
            children: /* @__PURE__ */ t("div", { className: l("min-h-0", { "h-auto": !u }), children: m.children.map(
              (e) => typeof e == "string" && /* @__PURE__ */ t(g, { blockId: e, index: c + 1 }, e)
            ) })
          }
        )
      ]
    }
  );
}, ne = () => {
  const r = d(M), { toggleRightPanel: c } = w();
  return /* @__PURE__ */ t(L, { className: "h-[calc(100vh-70px)]", children: /* @__PURE__ */ a("div", { children: [
    /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2 border-b p-4 text-base font-semibold", children: [
      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ t(k, {}),
        "Structure"
      ] }),
      /* @__PURE__ */ t(
        "button",
        {
          className: "text-slate-600 hover:text-slate-900",
          onClick: () => {
            c(F.LAYER);
          },
          children: /* @__PURE__ */ t(O, { size: 16 })
        }
      )
    ] }),
    r.children.length > 0 ? /* @__PURE__ */ t("div", { className: "divide-y border-b", children: r.children.map(
      (s) => typeof s == "string" && /* @__PURE__ */ t(g, { blockId: s, index: 1 }, s)
    ) }) : /* @__PURE__ */ a("div", { className: "m-4 rounded-sm p-4 text-center", children: [
      /* @__PURE__ */ t("h4", { className: "mb-1 text-lg font-medium text-slate-600", children: "No Elements" }),
      /* @__PURE__ */ t("p", { className: "text-slate-500", children: "Add an element to your page and it will show up here." })
    ] })
  ] }) });
};
export {
  ne as default
};
//# sourceMappingURL=structure.js.map
