'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Plus, Loader2, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
/** Stagger delay between each item animation in ms. */
const STAGGER_MS = 50;
/** Total animation duration in ms. */
const DURATION_MS = 250;
/**
 * (+) FAB with expandable action menu.
 * Renders inline — parent controls positioning.
 */
export function FloatingActionButton({ actions, className, style }) {
    const { t } = useTranslation('web');
    const [open, setOpen] = useState(false);
    // Close on Escape key
    useEffect(() => {
        if (!open)
            return;
        function handleKeyDown(e) {
            if (e.key === 'Escape') {
                setOpen(false);
            }
        }
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [open]);
    return (_jsxs(_Fragment, { children: [open ? (_jsx("div", { "data-testid": "fab-overlay", className: "fixed inset-0 z-40", onClick: () => setOpen(false), "aria-hidden": "true" })) : null, _jsxs("div", { "data-testid": "floating-action-button", className: cn('relative z-50', className), style: style, children: [_jsx("div", { className: cn('absolute start-0 bottom-[calc(100%+24px)] flex flex-col items-start gap-2', !open && 'pointer-events-none'), "data-testid": "fab-actions", children: actions.map((action, i) => {
                            const openDelay = (actions.length - 1 - i) * STAGGER_MS;
                            return (_jsxs("button", { "data-testid": `fab-action-${action.id}`, "aria-label": action.label, disabled: action.disabled ?? action.loading, className: cn('flex h-10 items-center gap-2.5 rounded-full px-4', 'bg-background text-foreground shadow-md', 'border-border border', 'hover:bg-accent hover:text-accent-foreground', 'disabled:pointer-events-none disabled:opacity-50', 'text-sm font-medium whitespace-nowrap', open ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-0 opacity-0'), style: {
                                    transition: `opacity ${open ? DURATION_MS : 120}ms ease-out ${open ? openDelay : 0}ms, transform ${open ? DURATION_MS : 120}ms ease-out ${open ? openDelay : 0}ms`,
                                }, onClick: () => {
                                    action.onClick();
                                    setOpen(false);
                                }, children: [_jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: action.loading ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : action.icon }), _jsx("span", { children: action.label })] }, action.id));
                        }) }), _jsxs(Button, { size: "icon", "data-testid": "fab-trigger", "aria-label": open ? t('fab.closeActions') : t('fab.createNew'), className: cn('relative h-14 w-14 rounded-full shadow-lg', 'bg-indigo-500 text-white hover:bg-indigo-400 dark:bg-indigo-500 dark:hover:bg-indigo-400', 'transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95'), onClick: () => setOpen((prev) => !prev), children: [_jsx(Plus, { className: cn('absolute h-7 w-7 stroke-[2.5] transition-all', open ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'), style: { transitionDuration: `${DURATION_MS}ms` } }), _jsx(X, { className: cn('absolute h-6 w-6 stroke-[2.5] transition-all', open ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'), style: { transitionDuration: `${DURATION_MS}ms` } })] })] })] }));
}
