'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { useReactFlow } from '@xyflow/react';
import { Eye, EyeOff, ZoomIn, ZoomOut, Maximize, RotateCcw } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { cn } from '../../../lib/utils.js';
export function CanvasToolbar({ showArchived, onToggleArchived, onResetViewport, startSlot, }) {
    const { t } = useTranslation('web');
    const { zoomIn, zoomOut, fitView, setViewport } = useReactFlow();
    const handleZoomIn = useCallback(() => {
        zoomIn({ duration: 200 });
    }, [zoomIn]);
    const handleZoomOut = useCallback(() => {
        zoomOut({ duration: 200 });
    }, [zoomOut]);
    const handleFitView = useCallback(() => {
        fitView({ duration: 400, padding: 0.3 });
    }, [fitView]);
    const handleReset = useCallback(() => {
        if (onResetViewport) {
            const viewport = onResetViewport();
            setViewport(viewport, { duration: 400 });
        }
    }, [onResetViewport, setViewport]);
    return (_jsxs("div", { className: "bg-background flex items-center gap-1 rounded-xl border px-2 py-1.5 shadow-md dark:bg-neutral-900", children: [startSlot ? (_jsxs(_Fragment, { children: [startSlot, _jsx("div", { className: "bg-border mx-1 h-5 w-px" })] })) : null, _jsx(ToolbarButton, { onClick: onToggleArchived, title: showArchived ? t('canvas.hideArchived') : t('canvas.showArchived'), active: showArchived, label: showArchived ? t('canvas.hideArchivedLabel') : t('canvas.showArchivedLabel'), children: showArchived ? _jsx(Eye, { className: "h-4 w-4" }) : _jsx(EyeOff, { className: "h-4 w-4" }) }), _jsx("div", { className: "bg-border mx-1 h-5 w-px" }), _jsx(ToolbarButton, { onClick: handleZoomOut, title: t('canvas.zoomOut'), children: _jsx(ZoomOut, { className: "h-4 w-4" }) }), _jsx(ToolbarButton, { onClick: handleZoomIn, title: t('canvas.zoomIn'), children: _jsx(ZoomIn, { className: "h-4 w-4" }) }), _jsx(ToolbarButton, { onClick: handleFitView, title: t('canvas.fitView'), children: _jsx(Maximize, { className: "h-4 w-4" }) }), onResetViewport ? (_jsx(ToolbarButton, { onClick: handleReset, title: t('canvas.resetView'), children: _jsx(RotateCcw, { className: "h-4 w-4" }) })) : null] }));
}
// ── Internal button ──────────────────────────────────────────────────────
function ToolbarButton({ children, onClick, title, label, active, }) {
    return (_jsxs("button", { type: "button", onClick: onClick, title: title, className: cn('inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium transition-colors', 'hover:bg-accent hover:text-accent-foreground', active ? 'text-primary bg-primary/10' : 'text-muted-foreground'), children: [children, label ? _jsx("span", { children: label }) : null] }));
}
