import { jsx, jsxs } from 'react/jsx-runtime';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../tabs.mjs';
import { useLayerStore } from '../../../lib/ui-builder/store/layer-store.mjs';
import { useEditorStore } from '../../../lib/ui-builder/store/editor-store.mjs';
import { pageLayerToCode } from '../internal/utils/templates.mjs';
import { CodeBlock } from './codeblock.mjs';
import { cn } from '../../../lib/utils.mjs';
import { useMemo } from 'react';
import { Label } from '../../label.mjs';

function CodePanel({ className }) {
  const componentRegistry = useEditorStore((state) => state.registry);
  const selectedPageId = useLayerStore((state) => state.selectedPageId);
  const findLayerById = useLayerStore((state) => state.findLayerById);
  const variables = useLayerStore((state) => state.variables);
  const page = findLayerById(selectedPageId);
  const codeBlocks = useMemo(() => {
    const serializedVariables = variables.map((v) => ({
      id: v.id,
      name: v.name,
      type: v.type,
      defaultValue: v.defaultValue
    }));
    return {
      react: pageLayerToCode(page, componentRegistry, variables),
      variables: JSON.stringify(
        serializedVariables,
        (key, value) => typeof value === "function" ? void 0 : value,
        2
      ),
      layers: JSON.stringify(
        page,
        (key, value) => typeof value === "function" ? void 0 : value,
        2
      )
    };
  }, [page, componentRegistry, variables]);
  return /* @__PURE__ */ jsx(CodeContent, { codeBlocks, className });
}
const CodeContent = ({
  codeBlocks,
  className
}) => {
  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "react", className: cn("w-full overflow-hidden", className), children: [
    /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [
      /* @__PURE__ */ jsx(TabsTrigger, { value: "react", children: "React" }),
      /* @__PURE__ */ jsx(TabsTrigger, { value: "serialized", children: "Serialized" })
    ] }),
    /* @__PURE__ */ jsx(TabsContent, { value: "react", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "overflow-auto max-h-[400px] w-full", children: /* @__PURE__ */ jsx(CodeBlock, { language: "tsx", value: codeBlocks.react }) }) }) }),
    /* @__PURE__ */ jsx(TabsContent, { value: "serialized", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
      codeBlocks.variables !== "[]" && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsx(Label, { children: "Variables" }),
        /* @__PURE__ */ jsx("div", { className: "overflow-auto max-h-[200px] w-full", children: /* @__PURE__ */ jsx(CodeBlock, { language: "json", value: codeBlocks.variables }) })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsx(Label, { children: "Layers" }),
        /* @__PURE__ */ jsx("div", { className: "overflow-auto max-h-[200px] w-full", children: /* @__PURE__ */ jsx(CodeBlock, { language: "json", value: codeBlocks.layers }) })
      ] })
    ] }) })
  ] });
};

export { CodePanel };
