import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CompareIcon } from "../../ui/Icons";
import { useEditContext } from "../../client/editContext";
import { SimpleIconButton } from "../../ui/SimpleIconButton";
import { MessageSquareMore, Map, Layers, PanelRight, FileDiff, RotateCcw, ZoomIn, ZoomOut, } 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";
import { DeviceSwitchToolbar } from "./DeviceSwitchToolbar";
import { Select } from "../../../components/ui/select";
const ZOOM_MIN = 0.25;
const ZOOM_MAX = 2;
const ZOOM_STEP = 0.25;
const ZOOM_PRESETS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
function clampZoom(value) {
    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));
}
function zoomValue(value) {
    return value.toFixed(2);
}
function zoomLabel(value) {
    return `${Math.round(value * 100)}%`;
}
function ZoomControls() {
    const editContext = useEditContext();
    if (!editContext || editContext.isMobile)
        return null;
    const pageViewContext = editContext.getActiveSlotContext()?.primaryPageViewContext;
    if (!pageViewContext || !pageViewContext.device)
        return null;
    const zoom = pageViewContext.zoom;
    const activeZoomValue = zoomValue(zoom);
    const presetOptions = ZOOM_PRESETS.map((value) => ({
        label: zoomLabel(value),
        value: zoomValue(value),
    }));
    const hasPreset = ZOOM_PRESETS.some((value) => zoomValue(value) === activeZoomValue);
    const options = hasPreset
        ? presetOptions
        : [
            ...presetOptions,
            {
                label: zoomLabel(zoom),
                value: activeZoomValue,
            },
        ];
    const setActiveSlotZoom = (value) => {
        const currentPageViewContext = editContext.getActiveSlotContext()?.primaryPageViewContext ??
            pageViewContext;
        currentPageViewContext.setZoom(value);
    };
    return (_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [_jsx(SimpleIconButton, { icon: _jsx(ZoomOut, { className: "h-5 w-5 p-0.5", strokeWidth: 1 }), label: "Zoom out", className: "h-7 w-7 p-0.5", "data-testid": "zoom-out-button", disabled: zoom <= ZOOM_MIN, onClick: () => setActiveSlotZoom((value) => clampZoom(value - ZOOM_STEP)) }), _jsx(Select, { className: "h-7 w-[88px] px-2", options: options, value: activeZoomValue, onValueChange: (value) => setActiveSlotZoom(Number(value)), placeholder: zoomLabel(zoom), size: "xs", "data-testid": "zoom-select" }), _jsx(SimpleIconButton, { icon: _jsx(ZoomIn, { className: "h-5 w-5 p-0.5", strokeWidth: 1 }), label: "Zoom in", className: "h-7 w-7 p-0.5", "data-testid": "zoom-in-button", disabled: zoom >= ZOOM_MAX, onClick: () => setActiveSlotZoom((value) => clampZoom(value + ZOOM_STEP)) }), _jsx(SimpleIconButton, { icon: _jsx(RotateCcw, { className: "h-5 w-5 p-0.5", strokeWidth: 1 }), label: "Reset zoom", className: "h-7 w-7 p-0.5", "data-testid": "zoom-reset-button", disabled: zoom === 1, onClick: () => setActiveSlotZoom(1) })] }));
}
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 activeSlotContext = editContext.getActiveSlotContext();
    const pageViewContext = activeSlotContext?.primaryPageViewContext;
    if (!pageViewContext)
        return null;
    const minimapEnabledInSettings = editContext.parheliaSettings?.showMinimap !== false;
    const device = pageViewContext.device;
    const commentsCount = editContext.comments?.filter((x) => !x.isResolved).length || 0;
    const hasLayout = !!pageViewContext.page?.item?.hasLayout;
    const canToggleEditorForm = editContext.workspaceId === "editor" && hasLayout;
    const canToggleComponentNavigator = hasLayout;
    const canToggleDiffHighlighting = hasLayout && !!device;
    const activeSlotId = editContext.getActiveSlotId();
    const editorFormVisible = !editContext.isEditorFormHiddenForSlot(activeSlotId);
    const showZoomControls = hasLayout && !!device;
    return (_jsxs(_Fragment, { children: [hasLayout && (_jsxs(_Fragment, { children: [_jsx(DeviceSwitchToolbar, {}), showZoomControls && (_jsxs(_Fragment, { children: [_jsx(Separator, { size: "small" }), _jsx(ZoomControls, {})] })), _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: activeSlotContext?.compareMode
                    ? "text-neutral-grey-50"
                    : "hover:text-neutral-grey-50", selected: activeSlotContext?.compareMode, onClick: () => {
                    activeSlotContext.setCompareMode(!activeSlotContext.compareMode);
                } })), activeSlotContext.compareMode && (_jsx(SimpleIconButton, { icon: _jsx(FileDiff, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Highlight changes", size: "large", "data-testid": "toggle-version-diff-highlighting-button", selected: editContext.showVersionDiffHighlighting, disabled: !canToggleDiffHighlighting, onClick: () => {
                    if (!canToggleDiffHighlighting)
                        return;
                    editContext.setShowVersionDiffHighlighting(!editContext.showVersionDiffHighlighting);
                } })), _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-highlight-100 animate-pulse ring-2 ring-offset-2"), onClick: () => {
                    editContext.setEditorFormHiddenForSlot(activeSlotId, 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-highlight-100 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) }) })), canToggleComponentNavigator && (_jsx(SimpleIconButton, { icon: _jsx(Layers, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Component Navigator", size: "large", "data-testid": "component-navigator-button", selected: editContext.showComponentNavigator, onClick: () => editContext.setShowComponentNavigator(!editContext.showComponentNavigator) }))] }));
}
//# sourceMappingURL=ViewportControls.js.map