'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef } from 'react';
export function CommandPalette({ open, onClose, items }) {
    const [query, setQuery] = useState('');
    const [activeIndex, setActiveIndex] = useState(0);
    const inputRef = useRef(null);
    const filtered = items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
    const groups = Array.from(new Set(filtered.map((i) => i.group)));
    useEffect(() => {
        if (open) {
            setQuery('');
            setActiveIndex(0);
            requestAnimationFrame(() => inputRef.current?.focus());
        }
    }, [open]);
    useEffect(() => {
        if (!open)
            return;
        function handleKey(e) {
            if (e.key === 'Escape') {
                onClose();
                return;
            }
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
            }
            if (e.key === 'ArrowUp') {
                e.preventDefault();
                setActiveIndex((i) => Math.max(i - 1, 0));
            }
            if (e.key === 'Enter' && filtered[activeIndex]) {
                filtered[activeIndex].onSelect();
                onClose();
            }
        }
        document.addEventListener('keydown', handleKey);
        return () => document.removeEventListener('keydown', handleKey);
    }, [open, onClose, filtered, activeIndex]);
    if (!open)
        return null;
    let flatIndex = -1;
    return (_jsxs("div", { className: "fixed inset-0 z-[70] flex items-start justify-center pt-[20vh]", children: [_jsx("div", { className: "fixed inset-0 bg-black/50", onClick: onClose, role: "presentation" }), _jsxs("div", { className: "relative z-10 w-full max-w-lg overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--popover)] shadow-2xl", children: [_jsxs("div", { className: "flex items-center border-b border-[var(--border)] px-4", children: [_jsx("svg", { className: "mr-2 h-4 w-4 text-[var(--muted-foreground)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => {
                                    setQuery(e.target.value);
                                    setActiveIndex(0);
                                }, placeholder: "Type a command or search...", className: "flex-1 bg-transparent py-3 text-sm outline-none" })] }), _jsxs("div", { className: "max-h-72 overflow-y-auto py-2", children: [groups.map((group) => (_jsxs("div", { children: [_jsx("div", { className: "px-4 py-1.5 text-xs font-medium text-[var(--muted-foreground)]", children: group }), filtered
                                        .filter((i) => i.group === group)
                                        .map((item) => {
                                        flatIndex++;
                                        const idx = flatIndex;
                                        return (_jsx("button", { onClick: () => {
                                                item.onSelect();
                                                onClose();
                                            }, className: `flex w-full px-4 py-2 text-sm ${idx === activeIndex ? 'bg-[var(--accent)]' : ''}`, children: item.label }, item.id));
                                    })] }, group))), filtered.length === 0 && (_jsx("p", { className: "px-4 py-6 text-center text-sm text-[var(--muted-foreground)]", children: "No results found." }))] })] })] }));
}
//# sourceMappingURL=CommandPalette.js.map