"use client";
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const layersPanel = require('./internal/layers-panel.cjs');
const editorPanel = require('./internal/editor-panel.cjs');
const propsPanel = require('./internal/props-panel.cjs');
const nav = require('./internal/components/nav.cjs');
const index = require('../../../../../node_modules/.pnpm/next-themes@0.4.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/next-themes/dist/index.cjs');
const tabs = require('../tabs.cjs');
const resizable = require('../resizable.cjs');
const button = require('../button.cjs');
const layerStore = require('../../lib/ui-builder/store/layer-store.cjs');
const useStore = require('../../hooks/use-store.cjs');
const editorStore = require('../../lib/ui-builder/store/editor-store.cjs');
const tailwindThemePanel = require('./internal/tailwind-theme-panel.cjs');
const configPanel = require('./internal/config-panel.cjs');
const variablesPanel = require('./internal/variables-panel.cjs');
const tooltip = require('../tooltip.cjs');
const sonner = require('../sonner.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }

const React__default = /*#__PURE__*/_interopDefaultCompat(React);

const UIBuilder = ({
  initialLayers,
  onChange,
  initialVariables,
  onVariablesChange,
  componentRegistry,
  panelConfig: userPanelConfig,
  persistLayerStore = true,
  allowVariableEditing = true,
  allowPagesCreation = true,
  allowPagesDeletion = true,
  navLeftChildren,
  navRightChildren,
  showExport = true,
  blocks,
  functionRegistry
}) => {
  const layerStore$1 = useStore.useStore(layerStore.useLayerStore, (state) => state);
  const editorStore$1 = useStore.useStore(editorStore.useEditorStore, (state) => state);
  const [editorStoreInitialized, setEditorStoreInitialized] = React.useState(false);
  const [layerStoreInitialized, setLayerStoreInitialized] = React.useState(false);
  const memoizedDefaultTabsContent = React.useMemo(() => defaultConfigTabsContent(), []);
  const currentPanelConfig = React.useMemo(() => {
    const effectiveTabsContent = userPanelConfig?.pageConfigPanelTabsContent || memoizedDefaultTabsContent;
    const defaultPanels = getDefaultPanelConfigValues(effectiveTabsContent, navLeftChildren, navRightChildren, showExport);
    return {
      navBar: userPanelConfig?.navBar ?? defaultPanels.navBar,
      pageConfigPanel: userPanelConfig?.pageConfigPanel ?? defaultPanels.pageConfigPanel,
      editorPanel: userPanelConfig?.editorPanel ?? defaultPanels.editorPanel,
      propsPanel: userPanelConfig?.propsPanel ?? defaultPanels.propsPanel
    };
  }, [userPanelConfig, memoizedDefaultTabsContent, navLeftChildren, navRightChildren, showExport]);
  React.useEffect(() => {
    if (editorStore$1 && componentRegistry && !editorStoreInitialized) {
      editorStore$1.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks, functionRegistry);
      setEditorStoreInitialized(true);
    }
  }, [
    editorStore$1,
    componentRegistry,
    editorStoreInitialized,
    persistLayerStore,
    allowPagesCreation,
    allowPagesDeletion,
    allowVariableEditing,
    blocks,
    functionRegistry
  ]);
  React.useEffect(() => {
    if (layerStore$1 && editorStore$1) {
      if (initialLayers && !layerStoreInitialized) {
        layerStore$1.initialize(initialLayers, void 0, void 0, initialVariables);
        setLayerStoreInitialized(true);
        const { clear } = layerStore.useLayerStore.temporal.getState();
        clear();
      } else {
        setLayerStoreInitialized(true);
      }
    }
  }, [
    layerStore$1,
    editorStore$1,
    componentRegistry,
    initialLayers,
    initialVariables,
    layerStoreInitialized
  ]);
  React.useEffect(() => {
    if (onChange && layerStore$1?.pages && layerStoreInitialized) {
      onChange(layerStore$1.pages);
    }
  }, [layerStore$1?.pages, onChange, layerStoreInitialized]);
  React.useEffect(() => {
    if (onVariablesChange && layerStore$1?.variables && layerStoreInitialized) {
      onVariablesChange(layerStore$1.variables);
    }
  }, [layerStore$1?.variables, onVariablesChange, layerStoreInitialized]);
  const isLoading = !layerStoreInitialized || !editorStoreInitialized;
  const layout = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(MainLayout, { panelConfig: currentPanelConfig });
  return /* @__PURE__ */ jsxRuntime.jsx(
    index.ThemeProvider,
    {
      "data-testid": "theme-provider",
      attribute: "class",
      defaultTheme: "system",
      enableSystem: true,
      disableTransitionOnChange: true,
      children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipProvider, { children: [
        layout,
        /* @__PURE__ */ jsxRuntime.jsx(sonner.Toaster, { position: "bottom-right" })
      ] })
    }
  );
};
function MainLayout({ panelConfig }) {
  const showLeftPanel = editorStore.useEditorStore((state) => state.showLeftPanel);
  const showRightPanel = editorStore.useEditorStore((state) => state.showRightPanel);
  const mainPanels = React.useMemo(() => {
    const panels = [];
    if (showLeftPanel) {
      panels.push({
        title: "Page Config",
        content: panelConfig.pageConfigPanel,
        defaultSize: showRightPanel ? 25 : 33
      });
    }
    panels.push({
      title: "UI Editor",
      content: panelConfig.editorPanel,
      defaultSize: showLeftPanel && showRightPanel ? 50 : showLeftPanel || showRightPanel ? 67 : 100
    });
    if (showRightPanel) {
      panels.push({
        title: "Props",
        content: panelConfig.propsPanel,
        defaultSize: showLeftPanel ? 25 : 33
      });
    }
    return panels;
  }, [panelConfig, showLeftPanel, showRightPanel]);
  const [selectedPanel, setSelectedPanel] = React.useState(() => {
    const editorPanel = mainPanels.find((panel) => panel.title === "UI Editor");
    return editorPanel || mainPanels[0];
  });
  React.useEffect(() => {
    const editorPanel = mainPanels.find((panel) => panel.title === "UI Editor");
    const currentPanel = mainPanels.find((panel) => panel.title === selectedPanel?.title);
    if (!currentPanel) {
      setSelectedPanel(editorPanel || mainPanels[0]);
    }
  }, [mainPanels, selectedPanel?.title]);
  const handlePanelClickById = React.useCallback((e) => {
    const panelIndex = parseInt(e.currentTarget.dataset.panelIndex || "0");
    setSelectedPanel(mainPanels[panelIndex]);
  }, [mainPanels]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      "data-testid": "component-editor",
      className: "flex flex-col w-full flex-grow h-dvh",
      children: [
        panelConfig.navBar,
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
          resizable.ResizablePanelGroup,
          {
            direction: "horizontal",
            className: "flex overflow-hidden flex-1",
            children: mainPanels.map((panel, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.Fragment, { children: [
              index > 0 && /* @__PURE__ */ jsxRuntime.jsx(resizable.ResizableHandle, { withHandle: true }),
              /* @__PURE__ */ jsxRuntime.jsx(
                resizable.ResizablePanel,
                {
                  defaultSize: panel.defaultSize,
                  minSize: 15,
                  className: "min-h-full flex-1",
                  children: panel.content
                }
              )
            ] }, panel.title))
          }
        ) }),
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex size-full flex-col md:hidden overflow-hidden ", children: [
          selectedPanel?.content,
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center rounded-full bg-primary p-2 shadow-lg", children: mainPanels.map((panel, index) => /* @__PURE__ */ jsxRuntime.jsx(
            button.Button,
            {
              variant: selectedPanel?.title !== panel.title ? "default" : "secondary",
              size: "sm",
              className: "flex-1",
              "data-panel-index": index,
              onClick: handlePanelClickById,
              children: panel.title
            },
            panel.title
          )) }) })
        ] })
      ]
    }
  );
}
function PageConfigPanel({
  className,
  tabsContent
}) {
  const { layers, appearance, data } = tabsContent;
  const tabCount = 1 + (appearance ? 1 : 0) + (data ? 1 : 0);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    tabs.Tabs,
    {
      "data-testid": "page-config-panel",
      defaultValue: "layers",
      className,
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs(tabs.TabsList, { className: `grid grid-cols-${tabCount} mx-4`, children: [
          /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "layers", children: layers.title }),
          appearance && /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "appearance", children: appearance.title }),
          data && /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "variables", children: data.title })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { value: "layers", children: layers.content }),
        appearance && /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { value: "appearance", children: appearance.content }),
        data && /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { value: "variables", children: data.content })
      ]
    }
  );
}
function defaultConfigTabsContent() {
  return {
    layers: { title: "Layers", content: /* @__PURE__ */ jsxRuntime.jsx(layersPanel.default, {}) },
    appearance: {
      title: "Appearance",
      content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 px-4 gap-2 flex flex-col overflow-y-auto overflow-x-auto", children: [
        /* @__PURE__ */ jsxRuntime.jsx(configPanel.ConfigPanel, {}),
        /* @__PURE__ */ jsxRuntime.jsx(tailwindThemePanel.TailwindThemePanel, {})
      ] })
    },
    data: { title: "Data", content: /* @__PURE__ */ jsxRuntime.jsx(variablesPanel.VariablesPanel, {}) }
  };
}
function LoadingSkeleton() {
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      "data-testid": "loading-skeleton",
      className: "flex flex-col flex-1 gap-1 bg-secondary/90",
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-16 animate-pulse bg-background rounded-md" }),
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 gap-1", children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/4 animate-pulse bg-background rounded-md" }),
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/2 animate-pulse bg-muted-background/90 rounded-md" }),
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/4 animate-pulse bg-background rounded-md" })
        ] })
      ]
    }
  );
}
const getDefaultPanelConfigValues = (tabsContent, navLeftChildren, navRightChildren, showExport) => {
  return {
    navBar: /* @__PURE__ */ jsxRuntime.jsx(nav.NavBar, { leftChildren: navLeftChildren, rightChildren: navRightChildren, showExport }),
    pageConfigPanel: /* @__PURE__ */ jsxRuntime.jsx(PageConfigPanel, { className: "pt-4 pb-20 md:pb-4 overflow-y-auto relative size-full", tabsContent }),
    editorPanel: /* @__PURE__ */ jsxRuntime.jsx(
      editorPanel,
      {
        className: "pb-20 md:pb-0 overflow-y-auto"
      }
    ),
    propsPanel: /* @__PURE__ */ jsxRuntime.jsx(propsPanel, { className: "px-4 pt-4 pb-20 md:pb-4 overflow-y-auto relative size-full" })
  };
};

exports.LoadingSkeleton = LoadingSkeleton;
exports.PageConfigPanel = PageConfigPanel;
exports.default = UIBuilder;
exports.defaultConfigTabsContent = defaultConfigTabsContent;
exports.getDefaultPanelConfigValues = getDefaultPanelConfigValues;
