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