'use strict';

const jsxRuntime = require('react/jsx-runtime');
const tabs = require('../../tabs.cjs');
const layerStore = require('../../../lib/ui-builder/store/layer-store.cjs');
const editorStore = require('../../../lib/ui-builder/store/editor-store.cjs');
const templates = require('../internal/utils/templates.cjs');
const codeblock = require('./codeblock.cjs');
const utils = require('../../../lib/utils.cjs');
const React = require('react');
const label = require('../../label.cjs');

function CodePanel({ className }) {
  const componentRegistry = editorStore.useEditorStore((state) => state.registry);
  const functionRegistry = editorStore.useEditorStore((state) => state.functionRegistry);
  const selectedPageId = layerStore.useLayerStore((state) => state.selectedPageId);
  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
  const variables = layerStore.useLayerStore((state) => state.variables);
  const page = findLayerById(selectedPageId);
  const codeBlocks = React.useMemo(() => {
    const serializedVariables = variables.map((v) => ({
      id: v.id,
      name: v.name,
      type: v.type,
      defaultValue: v.defaultValue
    }));
    return {
      react: templates.pageLayerToCode(page, componentRegistry, variables, functionRegistry),
      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, functionRegistry]);
  return /* @__PURE__ */ jsxRuntime.jsx(CodeContent, { codeBlocks, className });
}
const CodeContent = ({
  codeBlocks,
  className
}) => {
  return /* @__PURE__ */ jsxRuntime.jsxs(tabs.Tabs, { defaultValue: "react", className: utils.cn("w-full overflow-hidden", className), children: [
    /* @__PURE__ */ jsxRuntime.jsxs(tabs.TabsList, { className: "grid w-full grid-cols-2", children: [
      /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "react", children: "React" }),
      /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "serialized", children: "Serialized" })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { value: "react", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto max-h-[400px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(codeblock.CodeBlock, { language: "tsx", value: codeBlocks.react }) }) }) }),
    /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { value: "serialized", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
      codeBlocks.variables !== "[]" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { children: "Variables" }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto max-h-[200px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(codeblock.CodeBlock, { language: "json", value: codeBlocks.variables }) })
      ] }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { children: "Layers" }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto max-h-[200px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(codeblock.CodeBlock, { language: "json", value: codeBlocks.layers }) })
      ] })
    ] }) })
  ] });
};

exports.CodePanel = CodePanel;
