import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { usePreviewMode, useDebugMode, useEditorHelpers } from "../../../../../use-editor.js";
import { useEffect } 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@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { ScrollablePanelTab } from "./ScrollablePanelTab.js";
import { useLocalStorage } from "../../../../../node_modules/.pnpm/usehooks-ts@3.1.1_react@19.1.1/node_modules/usehooks-ts/dist/index.js";
import BrickSettingsView from "./BrickSettingsView.js";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle } from "./PanelBlockTitle.js";
import PageHierarchy from "./PageHierarchy.js";
import { IconRender } from "./IconRender.js";
import { useBrickManifest } from "../../shared/hooks/use-brick-manifest.js";
import { c as T, d as b$1 } from "../../../../sdk/dist/shared/chunk-QGYZ7CG5.js";
import "../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { useSectionByBrickId, usePageQueries, useDraftHelpers } from "../../../../../use-page-data.js";
import { Root as m, List as b, Trigger as P } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Root as n, Text as u } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
import { Button as o } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/button.js";
function PanelBrickInspector({ brick }) {
  const previewMode = usePreviewMode();
  const [tabsMapping, setTabsMapping] = useLocalStorage("inspector_tabs_map", {});
  const section = useSectionByBrickId(brick.id);
  const debugMode = useDebugMode();
  const manifest = useBrickManifest(brick.type);
  const pageQueries = usePageQueries();
  const contentProperties = T(manifest.props, (_prop) => {
    const prop = b$1(_prop);
    return prop.metadata?.category === "content" && prop["ui:field"] !== "hidden" && (typeof prop["ui:hidden-if"] === "undefined" || prop["ui:hidden-if"] === "no-page-queries" && pageQueries.length > 0) && (typeof prop.metadata?.["ui:responsive"] === "undefined" || prop.metadata?.["ui:responsive"] === true || prop.metadata?.["ui:responsive"] === previewMode) && (typeof prop["ui:responsive"] === "undefined" || prop["ui:responsive"] === true || prop["ui:responsive"] === previewMode);
  });
  const hasContentProperties = Object.keys(contentProperties).length > 0;
  const showTabsList = hasContentProperties || debugMode;
  const selectedTab = tabsMapping[brick.type] ?? (hasContentProperties ? "content" : "settings");
  useEffect(() => {
    if (!hasContentProperties && selectedTab === "content" || selectedTab === "debug" && !debugMode) {
      setTabsMapping((prev) => ({ ...prev, [brick.type]: "settings" }));
    }
  }, [brick.type, selectedTab, hasContentProperties]);
  if (!section) {
    console.warn(`No section found for brick: ${brick.id}`);
    console.log({ brick });
    return null;
  }
  console.dir({ brick, section, tabsMapping });
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow h-full", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 justify-between items-center group", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(IconRender, { manifest, className: "inline-block mr-2 !h-4 !w-4 " }),
        manifest.name
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "span",
        {
          className: D(
            "text-xs font-mono lowercase opacity-0 group-hover:opacity-70 transition-opacity delay-1000"
          ),
          onClick: () => {
            navigator.clipboard.writeText(brick.id);
          },
          children: brick.id
        }
      )
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(
      m,
      {
        value: selectedTab,
        onValueChange: (val) => {
          setTabsMapping((prev) => ({ ...prev, [brick.type]: val }));
        },
        className: "flex-1 flex flex-col",
        children: [
          showTabsList && /* @__PURE__ */ jsxRuntimeExports.jsxs(b, { className: "sticky top-0 z-50 bg-gray-100 dark:bg-dark-900", size: "1", children: [
            hasContentProperties && /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "content", className: "!flex-1", children: "Content" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "settings", className: "!flex-1", children: previewMode === "mobile" ? "Mobile settings" : "Settings" }),
            debugMode && /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "debug", className: "!flex-1", children: "Debug" })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollablePanelTab, { tab: "settings", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsTab, { brick, section, hasTabs: showTabsList }) }),
          hasContentProperties && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollablePanelTab, { tab: "content", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ContentTab, { brick, section, hasTabs: showTabsList }) }),
          debugMode && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollablePanelTab, { tab: "debug", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DebugTab, { brick, section, hasTabs: showTabsList }) })
        ]
      }
    )
  ] }, `brick-inspector-${brick.id}`);
}
function DebugTab({ brick, section, hasTabs }) {
  const codeClassName = D(
    E({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  );
  const { getParentBrick } = useDraftHelpers();
  const parentBrick = getParentBrick(brick.id);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[50cqh] grow-0 overflow-y-auto scrollbar-thin", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelBlockTitle, { children: [
        "Brick ",
        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs cursor-text select-all", children: brick.id })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: codeClassName, children: JSON.stringify(brick, null, 2) }) }) }),
      parentBrick && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelBlockTitle, { children: [
          "Parent Brick ",
          /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs", children: parentBrick.id })
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: codeClassName, children: JSON.stringify(parentBrick, null, 2) }) }) })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelBlockTitle, { children: [
        "Section ",
        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs", children: section.id })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: codeClassName, children: JSON.stringify(section, null, 2) }) }) })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      PageHierarchy,
      {
        brick,
        section,
        className: D(hasTabs ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
function SettingsTab({ brick, section, hasTabs }) {
  const previewMode = usePreviewMode();
  useBrickManifest(brick.type);
  const { deleteBrick } = useDraftHelpers();
  const { deselectBrick, hidePanel } = useEditorHelpers();
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { className: D("flex flex-col h-full"), onSubmit: (e) => e.preventDefault(), children: [
    previewMode === "mobile" && /* @__PURE__ */ jsxRuntimeExports.jsx(n, { size: "1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(u, { size: "1", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Note" }),
      ": You are editing mobile-only styles. Any changes here will only affect how the brick appears on mobile devices."
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(BrickSettingsView, { brick }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-2 p-2 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        o,
        {
          type: "button",
          size: "1",
          color: "red",
          radius: "medium",
          variant: "soft",
          onClick: () => {
            deleteBrick(brick.id);
            deselectBrick(brick.id);
            hidePanel("inspector");
          },
          children: "Delete brick"
        }
      ) })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      PageHierarchy,
      {
        brick,
        section,
        className: D(hasTabs ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
function ContentTab({ brick, section, hasTabs }) {
  const { deleteBrick } = useDraftHelpers();
  const { deselectBrick, hidePanel } = useEditorHelpers();
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("flex flex-col h-full"), children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        BrickSettingsView,
        {
          brick,
          label: "content",
          categoryFilter: (category) => category === "content"
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-2 p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        o,
        {
          type: "button",
          size: "1",
          color: "red",
          variant: "soft",
          radius: "medium",
          onClick: () => {
            deleteBrick(brick.id);
            deselectBrick(brick.id);
            hidePanel("inspector");
          },
          children: "Delete brick"
        }
      ) })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      PageHierarchy,
      {
        brick,
        section,
        className: D(hasTabs ? "h-[calc(50cqh-58px)]" : "h-[50cqh]")
      }
    )
  ] });
}
export {
  PanelBrickInspector as default
};
//# sourceMappingURL=PanelBrickInspector.js.map
