import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { usePreviewMode as y, useDebugMode as T, useEditorHelpers as v } from "../../../../../use-editor.js";
import { useEffect as P } from "react";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { ScrollablePanelTab as u } from "./ScrollablePanelTab.js";
import { useLocalStorage as C } from "../../../../../node_modules/.pnpm/usehooks-ts@3.1.1_react@18.3.0-canary-3d9b20132-20240124/node_modules/usehooks-ts/dist/index.js";
import b from "./BrickSettingsView.js";
import { tx as c, css as M } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle as p } from "./PanelBlockTitle.js";
import g from "./PageHierarchy.js";
import { IconRender as k } from "./IconRender.js";
import { useBrickManifest as w } from "../../shared/hooks/use-brick-manifest.js";
import { c as q } from "../../../../sdk/dist/shared/chunk-I46VBMLF.js";
import { useSectionByBrickId as z, usePageQueries as D, useDraftHelpers as N } from "../../../../../use-page-data.js";
import { resolveSchema as H } from "../../../../sdk/dist/shared/utils/schema-resolver.js";
import { Root as O, List as R, Trigger as j } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Root as E, Text as F } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
import { Button as B } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/button.js";
function ae({ brick: s }) {
  const i = y(), [a, l] = C("inspector_tabs_map", {}), o = z(s.id), n = T(), r = w(s.type), f = D(), S = q(r.props, (m) => {
    const t = H(m);
    return t.metadata?.category === "content" && t["ui:field"] !== "hidden" && (typeof t["ui:hidden-if"] > "u" || t["ui:hidden-if"] === "no-page-queries" && f.length > 0) && (typeof t.metadata?.["ui:responsive"] > "u" || t.metadata?.["ui:responsive"] === !0 || t.metadata?.["ui:responsive"] === i) && (typeof t["ui:responsive"] > "u" || t["ui:responsive"] === !0 || t["ui:responsive"] === i);
  }), d = Object.keys(S).length > 0, x = d || n, h = a[s.type] ?? (d ? "content" : "settings");
  return P(() => {
    !d && h === "content" && l((m) => ({ ...m, [s.type]: "settings" }));
  }, [l, s.type, h, d]), o ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-grow h-full", children: [
    /* @__PURE__ */ e.jsx(p, { children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 justify-between items-center group", children: [
      /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
        /* @__PURE__ */ e.jsx(k, { manifest: r, className: "inline-block mr-2 !h-4 !w-4 " }),
        r.name
      ] }),
      /* @__PURE__ */ e.jsx(
        "span",
        {
          className: c(
            "text-xs font-mono lowercase opacity-0 group-hover:opacity-70 transition-opacity delay-1000"
          ),
          onClick: () => {
            navigator.clipboard.writeText(s.id);
          },
          children: s.id
        }
      )
    ] }) }),
    /* @__PURE__ */ e.jsxs(
      O,
      {
        value: h,
        onValueChange: (m) => {
          l((t) => ({ ...t, [s.type]: m }));
        },
        className: "flex-1 flex flex-col",
        children: [
          x && /* @__PURE__ */ e.jsxs(R, { className: "sticky top-0 z-50 bg-gray-100 dark:bg-dark-900", size: "1", children: [
            d && /* @__PURE__ */ e.jsx(j, { value: "content", className: "!flex-1", children: "Content" }),
            /* @__PURE__ */ e.jsx(j, { value: "settings", className: "!flex-1", children: i === "mobile" ? "Mobile settings" : "Settings" }),
            n && /* @__PURE__ */ e.jsx(j, { value: "debug", className: "!flex-1", children: "Debug" })
          ] }),
          /* @__PURE__ */ e.jsx(u, { tab: "settings", children: /* @__PURE__ */ e.jsx(J, { brick: s, section: o, hasTabs: x }) }),
          d && /* @__PURE__ */ e.jsx(u, { tab: "content", children: /* @__PURE__ */ e.jsx(L, { brick: s, section: o, hasTabs: x }) }),
          n && /* @__PURE__ */ e.jsx(u, { tab: "debug", children: /* @__PURE__ */ e.jsx(I, { brick: s, section: o, hasTabs: x }) })
        ]
      }
    )
  ] }, `brick-inspector-${s.id}`) : (console.warn(`No section found for brick: ${s.id}`), null);
}
function I({ brick: s, section: i, hasTabs: a }) {
  const l = c(
    M({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  ), { getParentBrick: o } = N(), n = o(s.id);
  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ e.jsxs("div", { className: "h-[50cqh] grow-0 overflow-y-auto scrollbar-thin", children: [
      /* @__PURE__ */ e.jsxs(p, { children: [
        "Brick ",
        /* @__PURE__ */ e.jsx("code", { className: "text-xs cursor-text select-all", children: s.id })
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ e.jsx("pre", { className: "p-1", children: /* @__PURE__ */ e.jsx("code", { className: l, children: JSON.stringify(s, null, 2) }) }) }),
      n && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
        /* @__PURE__ */ e.jsxs(p, { children: [
          "Parent Brick ",
          /* @__PURE__ */ e.jsx("code", { className: "text-xs", children: n.id })
        ] }),
        /* @__PURE__ */ e.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ e.jsx("pre", { className: "p-1", children: /* @__PURE__ */ e.jsx("code", { className: l, children: JSON.stringify(n, null, 2) }) }) })
      ] }),
      /* @__PURE__ */ e.jsxs(p, { children: [
        "Section ",
        /* @__PURE__ */ e.jsx("code", { className: "text-xs", children: i.id })
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ e.jsx("pre", { className: "p-1", children: /* @__PURE__ */ e.jsx("code", { className: l, children: JSON.stringify(i, null, 2) }) }) })
    ] }),
    /* @__PURE__ */ e.jsx(
      g,
      {
        brick: s,
        section: i,
        className: c(a ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
function J({ brick: s, section: i, hasTabs: a }) {
  const l = y();
  w(s.type);
  const { deleteBrick: o } = N(), { deselectBrick: n, hidePanel: r } = v();
  return /* @__PURE__ */ e.jsxs("form", { className: c("flex flex-col h-full"), onSubmit: (f) => f.preventDefault(), children: [
    l === "mobile" && /* @__PURE__ */ e.jsx(E, { size: "1", children: /* @__PURE__ */ e.jsxs(F, { size: "1", children: [
      /* @__PURE__ */ e.jsx("strong", { children: "Note" }),
      ": You are editing mobile-only styles. Any changes here will only affect how the brick appears on mobile devices."
    ] }) }),
    /* @__PURE__ */ e.jsxs("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: [
      /* @__PURE__ */ e.jsx(b, { brick: s }),
      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-2 p-2 border-t border-gray-200", children: /* @__PURE__ */ e.jsx(
        B,
        {
          type: "button",
          size: "1",
          color: "red",
          radius: "medium",
          variant: "soft",
          onClick: () => {
            o(s.id), n(s.id), r("inspector");
          },
          children: "Delete brick"
        }
      ) })
    ] }),
    /* @__PURE__ */ e.jsx(
      g,
      {
        brick: s,
        section: i,
        className: c(a ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
function L({ brick: s, section: i, hasTabs: a }) {
  const { deleteBrick: l } = N(), { deselectBrick: o, hidePanel: n } = v();
  return /* @__PURE__ */ e.jsxs("div", { className: c("flex flex-col h-full"), children: [
    /* @__PURE__ */ e.jsxs("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: [
      /* @__PURE__ */ e.jsx(
        b,
        {
          brick: s,
          label: "content",
          categoryFilter: (r) => r === "content"
        }
      ),
      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-2 p-2", children: /* @__PURE__ */ e.jsx(
        B,
        {
          type: "button",
          size: "1",
          color: "red",
          variant: "soft",
          radius: "medium",
          onClick: () => {
            l(s.id), o(s.id), n("inspector");
          },
          children: "Delete brick"
        }
      ) })
    ] }),
    /* @__PURE__ */ e.jsx(
      g,
      {
        brick: s,
        section: i,
        className: c(a ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
export {
  ae as default
};
//# sourceMappingURL=PanelBrickInspector.js.map
