import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { CompareIcon } from "../../ui/Icons";
import { useEditContext } from "../../client/editContext";
import { SimpleIconButton } from "../../ui/SimpleIconButton";
import { Monitor, Smartphone, Table, MessageSquareMore, Map, PanelRight, } from "lucide-react";
import { Separator } from "../Separator";
import { useEffect, useState } from "react";
import { DEVICE_CHANGE_EVENT } from "../../page-viewer/pageViewContext";
import { cn } from "../../../lib/utils";
export function ViewportControls() {
    const editContext = useEditContext();
    // Counter to force re-renders when device changes.
    // The pageViewContext uses a stable ref pattern, so reading pageViewContext.device
    // won't trigger re-renders when device state changes. We listen to a custom event
    // dispatched by setDevice and increment this counter to force re-render.
    const [, setDeviceChangeCounter] = useState(0);
    useEffect(() => {
        const handler = () => {
            setDeviceChangeCounter((x) => x + 1);
        };
        window.addEventListener(DEVICE_CHANGE_EVENT, handler);
        return () => window.removeEventListener(DEVICE_CHANGE_EVENT, handler);
    }, []);
    if (!editContext || editContext.isMobile)
        return null;
    const pageViewContext = editContext.getActiveSlotContext()?.primaryPageViewContext;
    if (!pageViewContext)
        return null;
    const minimapEnabledInSettings = editContext.parheliaSettings?.showMinimap !== false;
    const device = pageViewContext.device;
    const setDevice = pageViewContext.setDevice;
    const commentsCount = editContext.comments?.filter((x) => !x.isResolved).length || 0;
    const canToggleEditorForm = editContext.workspaceId === "editor" &&
        !!pageViewContext.page?.item?.hasLayout;
    const editorFormVisible = !editContext.editorFormHidden;
    return (_jsxs(_Fragment, { children: [_jsx(SimpleIconButton, { icon: _jsx(Monitor, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Desktop", size: "large", "data-testid": "desktop-viewport-button", selected: device === "desktop", onClick: () => setDevice("desktop") }), _jsx(SimpleIconButton, { icon: _jsx(Smartphone, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Mobile", size: "large", "data-testid": "mobile-viewport-button", selected: Boolean(device && device !== "desktop"), onClick: () => {
                    if (editContext.configuration.devices[0]) {
                        setDevice(editContext.configuration.devices[0].name);
                    }
                } }), _jsx(SimpleIconButton, { icon: _jsx(Table, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Form", size: "large", "data-testid": "form-viewport-button", selected: !device, onClick: () => setDevice("") }), _jsx(Separator, { size: "large" }), !editContext.isMobile && (_jsx(SimpleIconButton, { icon: _jsx(CompareIcon, { className: "h-6 w-6 p-1" }), label: "Compare", size: "large", "data-testid": "compare-mode-button", className: editContext.getActiveSlotContext()?.compareMode
                    ? "text-gray-600"
                    : "hover:text-gray-600", selected: editContext.getActiveSlotContext()?.compareMode, onClick: () => {
                    const slotContext = editContext.getActiveSlotContext();
                    if (slotContext) {
                        slotContext.setCompareMode(!slotContext.compareMode);
                    }
                } })), _jsx(Separator, { size: "large" }), " ", canToggleEditorForm && (_jsx(SimpleIconButton, { ref: editContext.editorFormToggleButtonRef, icon: _jsx(PanelRight, { className: "h-6 w-6 rotate-180 p-1", strokeWidth: 1 }), label: editorFormVisible ? "Hide editor form" : "Show editor form", size: "large", "data-testid": "editor-form-toggle-button", selected: editorFormVisible, className: cn(editContext.editorFormHintVisible &&
                    "ring-theme-secondary animate-pulse ring-2 ring-offset-2"), onClick: () => {
                    editContext.setEditorFormHidden(editorFormVisible);
                    if (editContext.editorFormHintVisible) {
                        editContext.dismissEditorFormHint();
                    }
                } })), _jsx(SimpleIconButton, { className: "relative", selected: !!editContext.showComments, icon: _jsx(MessageSquareMore, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Show comments", size: "large", "data-testid": "toggle-comments-button", onClick: () => {
                    const newShowComments = !editContext.showComments;
                    editContext.setShowComments(newShowComments);
                    // Open the feedback sidebar when enabling comments
                    if (newShowComments) {
                        editContext.openSidebar("feedback");
                    }
                }, children: commentsCount > 0 && (_jsx("div", { className: "bg-theme-secondary absolute -top-1 -right-1 h-4 min-w-[16px] rounded-full px-1 text-center text-[10px] leading-4 font-bold text-white tabular-nums", style: { paddingBottom: "1px" }, children: commentsCount > 99 ? "99+" : commentsCount })) }), minimapEnabledInSettings && (_jsx(_Fragment, { children: _jsx(SimpleIconButton, { icon: _jsx(Map, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Show minimap", size: "large", "data-testid": "toggle-minimap-button", selected: editContext.showMinimap, onClick: () => editContext.setShowMinimap(!editContext.showMinimap) }) }))] }));
}
//# sourceMappingURL=ViewportControls.js.map