"use client";
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useCallback, useMemo, forwardRef } from 'react';
import { PanelLeft, PanelRight, Maximize, Monitor, Tablet, Smartphone, Undo, Redo, Eye, FileUp, SunIcon, MoonIcon, MoreVertical, PlusIcon, CheckIcon, X } from 'lucide-react';
import { Button } from '../../../button.mjs';
import { Dialog, DialogTrigger, DialogHeader, DialogTitle, DialogPortal, DialogOverlay, DialogContent, DialogClose } from '../../../dialog.mjs';
import { useLayerStore } from '../../../../lib/ui-builder/store/layer-store.mjs';
import LayerRenderer from '../../layer-renderer.mjs';
import { useTheme as z } from '../../../../../../../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.mjs';
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '../../../dropdown-menu.mjs';
import { Popover, PopoverTrigger, PopoverContent } from '../../../popover.mjs';
import { Command, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, CommandShortcut } from '../../../command.mjs';
import { Input } from '../../../input.mjs';
import { cn } from '../../../../lib/utils.mjs';
import { CodePanel } from '../../components/code-panel.mjs';
import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mjs';
import { Tooltip, TooltipTrigger, TooltipContent } from '../../../tooltip.mjs';
import { useKeyboardShortcuts } from '../../../../hooks/use-keyboard-shortcuts.mjs';
import { useStore } from '../../../../../../../node_modules/.pnpm/zustand@4.5.5_@types_react@19.2.6_immer@11.1.3_react@19.2.0/node_modules/zustand/esm/index.mjs';
import { toKeyboardShortcut, SHORTCUTS } from '../../../../lib/ui-builder/shortcuts/shortcut-registry.mjs';

const Z_INDEX = 1e3;
function NavBar({ leftChildren, rightChildren, showExport = true } = {}) {
  const selectedPageId = useLayerStore((state) => state.selectedPageId);
  const findLayerById = useLayerStore((state) => state.findLayerById);
  const componentRegistry = useEditorStore((state) => state.registry);
  const incrementRevision = useEditorStore((state) => state.incrementRevision);
  const showLeftPanel = useEditorStore((state) => state.showLeftPanel);
  const setShowLeftPanel = useEditorStore((state) => state.setShowLeftPanel);
  const showRightPanel = useEditorStore((state) => state.showRightPanel);
  const setShowRightPanel = useEditorStore((state) => state.setShowRightPanel);
  const pastStates = useStore(
    useLayerStore.temporal,
    (state) => state.pastStates
  );
  const futureStates = useStore(
    useLayerStore.temporal,
    (state) => state.futureStates
  );
  const { undo, redo } = useLayerStore.temporal.getState();
  const page = findLayerById(selectedPageId);
  const canUndo = !!pastStates.length;
  const canRedo = !!futureStates.length;
  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
  const handleUndo = useCallback(() => {
    undo();
    incrementRevision();
  }, [undo, incrementRevision]);
  const handleRedo = useCallback(() => {
    redo();
    incrementRevision();
  }, [redo, incrementRevision]);
  const keyCombinations = useMemo(
    () => [
      // Use shortcut registry for undo/redo
      toKeyboardShortcut("undo", (e) => {
        e.preventDefault();
        handleUndo();
      }),
      toKeyboardShortcut("redo", (e) => {
        e.preventDefault();
        handleRedo();
      }),
      // Debug shortcuts (not in registry)
      {
        keys: { metaKey: true, shiftKey: true },
        key: "9",
        handler: (e) => {
          e.preventDefault();
          const elements = document.querySelectorAll("*");
          elements.forEach((element) => {
            element.classList.add("animate-spin", "origin-center");
          });
        }
      },
      {
        keys: { metaKey: true, shiftKey: true },
        key: "0",
        handler: (e) => {
          e.preventDefault();
          const elements = document.querySelectorAll("*");
          elements.forEach((element) => {
            element.classList.remove("animate-spin", "origin-center");
          });
        }
      }
    ],
    [handleUndo, handleRedo]
  );
  useKeyboardShortcuts(keyCombinations);
  const handleOpenPreview = useCallback(() => {
    setIsPreviewModalOpen(true);
  }, []);
  const handleOpenExport = useCallback(() => {
    setIsExportModalOpen(true);
  }, []);
  const handleToggleLeftPanel = useCallback(() => {
    setShowLeftPanel(!showLeftPanel);
  }, [showLeftPanel, setShowLeftPanel]);
  const handleToggleRightPanel = useCallback(() => {
    setShowRightPanel(!showRightPanel);
  }, [showRightPanel, setShowRightPanel]);
  const style = useMemo(() => ({ zIndex: Z_INDEX }), []);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: "flex items-center justify-between bg-background px-2 md:px-6 py-4 border-b",
      style,
      children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          leftChildren,
          leftChildren && /* @__PURE__ */ jsx("div", { className: "hidden md:flex h-10 w-px bg-border" }),
          /* @__PURE__ */ jsxs("div", { className: "hidden md:contents", children: [
            /* @__PURE__ */ jsxs(Tooltip, { children: [
              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                Button,
                {
                  onClick: handleToggleLeftPanel,
                  variant: showLeftPanel ? "secondary" : "outline",
                  size: "icon",
                  className: "flex flex-col justify-center",
                  children: [
                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Left Panel" }),
                    /* @__PURE__ */ jsx(PanelLeft, { className: "w-4 h-4" })
                  ]
                }
              ) }),
              /* @__PURE__ */ jsxs(TooltipContent, { children: [
                showLeftPanel ? "Hide" : "Show",
                " Left Panel"
              ] })
            ] }),
            /* @__PURE__ */ jsxs(Tooltip, { children: [
              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                Button,
                {
                  onClick: handleToggleRightPanel,
                  variant: showRightPanel ? "secondary" : "outline",
                  size: "icon",
                  className: "flex flex-col justify-center",
                  children: [
                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Right Panel" }),
                    /* @__PURE__ */ jsx(PanelRight, { className: "w-4 h-4" })
                  ]
                }
              ) }),
              /* @__PURE__ */ jsxs(TooltipContent, { children: [
                showRightPanel ? "Hide" : "Show",
                " Right Panel"
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsx("div", { className: "hidden md:flex h-10 w-px bg-border" }),
          /* @__PURE__ */ jsx(PagesPopover, {}),
          /* @__PURE__ */ jsx(PreviewModeToggle, {})
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-end gap-2", children: [
          /* @__PURE__ */ jsxs("div", { className: "hidden md:flex space-x-2", children: [
            /* @__PURE__ */ jsx(
              ActionButtons,
              {
                canUndo,
                canRedo,
                onUndo: handleUndo,
                onRedo: handleRedo,
                onOpenPreview: handleOpenPreview,
                onOpenExport: handleOpenExport,
                showExport
              }
            ),
            /* @__PURE__ */ jsx("div", { className: "h-10 flex w-px bg-border" })
          ] }),
          /* @__PURE__ */ jsx(ModeToggle, {}),
          /* @__PURE__ */ jsxs("div", { className: "flex md:hidden space-x-2", children: [
            /* @__PURE__ */ jsx("div", { className: "h-10 flex w-px bg-border" }),
            /* @__PURE__ */ jsx(
              ResponsiveDropdown,
              {
                canUndo,
                canRedo,
                onUndo: handleUndo,
                onRedo: handleRedo,
                onOpenPreview: handleOpenPreview,
                onOpenExport: handleOpenExport,
                showExport,
                children: rightChildren
              }
            )
          ] }),
          rightChildren && /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center gap-2", children: [
            /* @__PURE__ */ jsx("div", { className: "h-10 w-px bg-border" }),
            rightChildren
          ] })
        ] }),
        /* @__PURE__ */ jsx(
          PreviewDialog,
          {
            isOpen: isPreviewModalOpen,
            onOpenChange: setIsPreviewModalOpen,
            page,
            componentRegistry
          }
        ),
        showExport && /* @__PURE__ */ jsx(
          CodeDialog,
          {
            isOpen: isExportModalOpen,
            onOpenChange: setIsExportModalOpen
          }
        )
      ]
    }
  );
}
const ActionButtons = ({
  canUndo,
  canRedo,
  onUndo,
  onRedo,
  onOpenPreview,
  onOpenExport,
  showExport = true
}) => {
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(Tooltip, { children: [
      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
        Button,
        {
          onClick: onUndo,
          variant: "secondary",
          size: "icon",
          disabled: !canUndo,
          className: "flex flex-col justify-center",
          children: [
            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Undo" }),
            /* @__PURE__ */ jsx(Undo, { className: "w-4 h-4" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxs(TooltipContent, { className: "flex items-center gap-2", children: [
        "Undo",
        /* @__PURE__ */ jsx(CommandShortcut, { className: "ml-0 text-sm leading-3", children: SHORTCUTS.undo.shortcutDisplay })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Tooltip, { children: [
      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
        Button,
        {
          onClick: onRedo,
          variant: "secondary",
          size: "icon",
          disabled: !canRedo,
          className: "flex flex-col justify-center",
          children: [
            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Redo" }),
            /* @__PURE__ */ jsx(Redo, { className: "w-4 h-4" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxs(TooltipContent, { className: "flex items-center gap-2", children: [
        "Redo",
        /* @__PURE__ */ jsx(CommandShortcut, { className: "ml-0 text-sm leading-3", children: SHORTCUTS.redo.shortcutDisplay })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Tooltip, { children: [
      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
        Button,
        {
          onClick: onOpenPreview,
          variant: "secondary",
          size: "icon",
          className: "flex flex-col justify-center",
          children: [
            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Preview" }),
            /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxs(TooltipContent, { className: "flex items-center gap-2", children: [
        "Preview",
        /* @__PURE__ */ jsx(CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318+\u21E7+P" })
      ] })
    ] }),
    showExport && /* @__PURE__ */ jsxs(Tooltip, { children: [
      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
        Button,
        {
          onClick: onOpenExport,
          variant: "secondary",
          size: "icon",
          className: "flex flex-col justify-center",
          children: [
            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Export" }),
            /* @__PURE__ */ jsx(FileUp, { className: "w-4 h-4" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxs(TooltipContent, { className: "flex items-center gap-2", children: [
        "Export Code",
        /* @__PURE__ */ jsx(CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318+\u21E7+E" })
      ] })
    ] })
  ] });
};
const ResponsiveDropdown = ({
  canUndo,
  canRedo,
  onUndo,
  onRedo,
  onOpenPreview,
  onOpenExport,
  showExport = true,
  children
}) => {
  const style = useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "icon", children: [
      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }),
      /* @__PURE__ */ jsx(MoreVertical, { className: "w-4 h-4" })
    ] }) }),
    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", style, children: [
      /* @__PURE__ */ jsxs(
        DropdownMenuItem,
        {
          className: "gap-2",
          onClick: onUndo,
          disabled: !canUndo,
          children: [
            /* @__PURE__ */ jsx(Undo, { className: "w-4 h-4" }),
            "Undo",
            /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: SHORTCUTS.undo.shortcutDisplay })
          ]
        }
      ),
      /* @__PURE__ */ jsxs(
        DropdownMenuItem,
        {
          className: "gap-2",
          onClick: onRedo,
          disabled: !canRedo,
          children: [
            /* @__PURE__ */ jsx(Redo, { className: "w-4 h-4" }),
            "Redo",
            /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: SHORTCUTS.redo.shortcutDisplay })
          ]
        }
      ),
      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
      /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2", onClick: onOpenPreview, children: [
        /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" }),
        "Preview",
        /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318+\u21E7+P" })
      ] }),
      showExport && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2", onClick: onOpenExport, children: [
        /* @__PURE__ */ jsx(FileUp, { className: "w-4 h-4" }),
        "Export",
        /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318+\u21E7+E" })
      ] }),
      children && /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
        /* @__PURE__ */ jsx("div", { className: "p-2", children })
      ] })
    ] })
  ] });
};
const PreviewDialog = ({
  isOpen,
  onOpenChange,
  page,
  componentRegistry
}) => {
  const style = useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
  const shortcuts = useMemo(
    () => [
      {
        keys: { metaKey: true, shiftKey: true },
        key: "p",
        handler: (e) => {
          e.preventDefault();
          onOpenChange(true);
        }
      }
    ],
    [onOpenChange]
  );
  useKeyboardShortcuts(shortcuts);
  return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange, children: [
    /* @__PURE__ */ jsx(DialogTrigger, {}),
    /* @__PURE__ */ jsxs(
      DialogContentWithZIndex,
      {
        className: "max-w-[calc(100dvw)] max-h-[calc(100dvh)] overflow-auto p-0 gap-0",
        style,
        children: [
          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "py-3 bg-yellow-600 text-center", children: /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: "Page Preview" }) }) }),
          /* @__PURE__ */ jsx(
            LayerRenderer,
            {
              className: "w-full h-full flex flex-col overflow-x-hidden",
              page,
              componentRegistry
            }
          )
        ]
      }
    )
  ] });
};
const CodeDialog = ({ isOpen, onOpenChange }) => {
  const style = useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
  const shortcuts = useMemo(
    () => [
      {
        keys: { metaKey: true, shiftKey: true },
        key: "e",
        handler: (e) => {
          e.preventDefault();
          onOpenChange(true);
        }
      }
    ],
    [onOpenChange]
  );
  useKeyboardShortcuts(shortcuts);
  return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange, children: [
    /* @__PURE__ */ jsx(DialogTrigger, {}),
    /* @__PURE__ */ jsxs(
      DialogContentWithZIndex,
      {
        className: "sm:max-w-[625px] max-h-[625px]",
        style,
        children: [
          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Generated Code" }) }),
          /* @__PURE__ */ jsx(CodePanel, {})
        ]
      }
    )
  ] });
};
function ModeToggle() {
  const { setTheme } = z();
  const style = useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
  const handleSetLightTheme = useCallback(() => {
    setTheme("light");
  }, [setTheme]);
  const handleSetDarkTheme = useCallback(() => {
    setTheme("dark");
  }, [setTheme]);
  const handleSetSystemTheme = useCallback(() => {
    setTheme("system");
  }, [setTheme]);
  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
    /* @__PURE__ */ jsxs(Tooltip, { children: [
      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "icon", children: [
        /* @__PURE__ */ jsx(SunIcon, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
        /* @__PURE__ */ jsx(MoonIcon, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle theme" })
      ] }) }) }),
      /* @__PURE__ */ jsx(TooltipContent, { children: "Toggle theme" })
    ] }),
    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", style, children: [
      /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleSetLightTheme, children: "Light" }),
      /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleSetDarkTheme, children: "Dark" }),
      /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleSetSystemTheme, children: "System" })
    ] })
  ] });
}
function PagesPopover() {
  const { pages, selectedPageId, addPageLayer, selectPage } = useLayerStore();
  const [open, setOpen] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [selectedPage, setSelectedPage] = useState(
    selectedPageId
  );
  const [textInputValue, setTextInputValue] = useState("");
  const allowPagesCreation = useEditorStore(
    (state) => state.allowPagesCreation
  );
  const selectedPageData = useMemo(() => {
    return pages.find((page) => page.id === selectedPageId);
  }, [pages, selectedPageId]);
  const handleSelect = useCallback(
    (pageId) => {
      setSelectedPage(pageId);
      selectPage(pageId);
      setOpen(false);
    },
    [selectPage, setOpen]
  );
  const handleAddPageLayer = useCallback(
    (pageName) => {
      addPageLayer(pageName);
      setTextInputValue("");
    },
    [addPageLayer, setTextInputValue]
  );
  const handleSubmit = useCallback(
    (e) => {
      e.preventDefault();
      handleAddPageLayer(textInputValue);
    },
    [handleAddPageLayer, textInputValue]
  );
  const handleTextInputChange = useCallback(
    (e) => {
      setTextInputValue(e.target.value);
    },
    [setTextInputValue]
  );
  const handleKeyDown = useCallback(
    (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        handleAddPageLayer(textInputValue);
      }
    },
    [handleAddPageLayer, textInputValue]
  );
  const style = useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
  const textInputForm = /* @__PURE__ */ jsx("form", { className: "w-full", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center space-x-2", children: [
    /* @__PURE__ */ jsx(
      Input,
      {
        className: "w-full flex-grow",
        placeholder: "New page name...",
        value: textInputValue,
        onChange: handleTextInputChange,
        onKeyDown: handleKeyDown
      }
    ),
    /* @__PURE__ */ jsx(Button, { type: "submit", variant: "secondary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "w-4 h-4" }) })
  ] }) });
  return /* @__PURE__ */ jsx("div", { className: "relative flex justify-center", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
    /* @__PURE__ */ jsxs(Tooltip, { children: [
      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
        Button,
        {
          variant: "outline",
          size: "default",
          className: "max-w-30 overflow-hidden",
          children: selectedPageData?.name
        }
      ) }) }),
      /* @__PURE__ */ jsx(TooltipContent, { children: "Select page" })
    ] }),
    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[300px] p-0", style, children: /* @__PURE__ */ jsxs(Command, { children: [
      /* @__PURE__ */ jsx(
        CommandInput,
        {
          placeholder: "Select page or create new...",
          value: inputValue,
          onValueChange: setInputValue
        }
      ),
      /* @__PURE__ */ jsxs(CommandList, { children: [
        /* @__PURE__ */ jsxs(CommandEmpty, { children: [
          "No pages found",
          allowPagesCreation && textInputForm
        ] }),
        pages.map((page) => /* @__PURE__ */ jsx(
          PageItem,
          {
            selectedPageId,
            page,
            onSelect: handleSelect
          },
          page.id
        )),
        /* @__PURE__ */ jsx(CommandSeparator, {}),
        allowPagesCreation && /* @__PURE__ */ jsx(CommandGroup, { heading: "Create new page", children: /* @__PURE__ */ jsx(CommandItem, { children: textInputForm }) })
      ] })
    ] }) })
  ] }) });
}
const PageItem = ({
  selectedPageId,
  page,
  onSelect
}) => {
  const handleSelect = useCallback(() => {
    onSelect(page.id);
  }, [onSelect, page.id]);
  return /* @__PURE__ */ jsxs(
    CommandItem,
    {
      value: page.name,
      onSelect: handleSelect,
      className: cn(selectedPageId === page.id && "font-bold"),
      children: [
        selectedPageId === page.id ? /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 mr-2" }) : null,
        page.name
      ]
    }
  );
};
const DialogContentWithZIndex = forwardRef(({ className, children, ...props }, ref) => {
  const style = useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
    /* @__PURE__ */ jsx(DialogOverlay, { style }),
    /* @__PURE__ */ jsxs(
      DialogContent,
      {
        ref,
        className: cn(
          "fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
          className
        ),
        ...props,
        children: [
          children,
          /* @__PURE__ */ jsxs(DialogClose, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
            /* @__PURE__ */ jsx(X, { className: "h-4 w-4 rounded-full p-1" }),
            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
          ] })
        ]
      }
    )
  ] });
});
DialogContentWithZIndex.displayName = "DialogContentWithZIndex";
const PreviewModeToggle = () => {
  const { previewMode, setPreviewMode } = useEditorStore();
  const handleSelect = useCallback((mode) => {
    setPreviewMode(mode);
  }, [setPreviewMode]);
  const style = useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
  const previewModeIcon = useMemo(() => {
    return {
      mobile: /* @__PURE__ */ jsx(Smartphone, { className: "h-4 w-4" }),
      tablet: /* @__PURE__ */ jsx(Tablet, { className: "h-4 w-4" }),
      desktop: /* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4" }),
      responsive: /* @__PURE__ */ jsx(Maximize, { className: "h-4 w-4" })
    }[previewMode];
  }, [previewMode]);
  const handleSelectMobile = useCallback(() => {
    handleSelect("mobile");
  }, [handleSelect]);
  const handleSelectTablet = useCallback(() => {
    handleSelect("tablet");
  }, [handleSelect]);
  const handleSelectDesktop = useCallback(() => {
    handleSelect("desktop");
  }, [handleSelect]);
  const handleSelectResponsive = useCallback(() => {
    handleSelect("responsive");
  }, [handleSelect]);
  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
    /* @__PURE__ */ jsxs(Tooltip, { children: [
      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "icon", children: [
        previewModeIcon,
        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Select screen size" })
      ] }) }) }),
      /* @__PURE__ */ jsx(TooltipContent, { children: "Select screen size" })
    ] }),
    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", style, children: [
      /* @__PURE__ */ jsxs(
        DropdownMenuItem,
        {
          onSelect: handleSelectMobile,
          className: previewMode === "mobile" ? "bg-secondary text-secondary-foreground" : "",
          children: [
            /* @__PURE__ */ jsx(Smartphone, { className: "mr-2 h-4 w-4" }),
            /* @__PURE__ */ jsx("span", { children: "Mobile" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs(
        DropdownMenuItem,
        {
          onSelect: handleSelectTablet,
          className: previewMode === "tablet" ? "bg-secondary text-secondary-foreground" : "",
          children: [
            /* @__PURE__ */ jsx(Tablet, { className: "mr-2 h-4 w-4" }),
            /* @__PURE__ */ jsx("span", { children: "Tablet" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs(
        DropdownMenuItem,
        {
          onSelect: handleSelectDesktop,
          className: previewMode === "desktop" ? "bg-secondary text-secondary-foreground" : "",
          children: [
            /* @__PURE__ */ jsx(Monitor, { className: "mr-2 h-4 w-4" }),
            /* @__PURE__ */ jsx("span", { children: "Desktop" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs(
        DropdownMenuItem,
        {
          onSelect: handleSelectResponsive,
          className: previewMode === "responsive" ? "bg-secondary text-secondary-foreground" : "",
          children: [
            /* @__PURE__ */ jsx(Maximize, { className: "mr-2 h-4 w-4" }),
            /* @__PURE__ */ jsx("span", { children: "Responsive" })
          ]
        }
      )
    ] })
  ] });
};

export { NavBar };
