import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo } from 'react';
import { usePreferences } from '../../hooks/usePreferences';
import { useShareStatus } from '../../hooks/useShareStatus';
import { filterCommands, getCommandDescription } from '../../lib/commands';
export function CommandSuggestionsPopup({ query, selectedIndex, onSelect, onEnterSelect, onClose, sessionId, }) {
    const { preferences } = usePreferences();
    const { data: shareStatus } = useShareStatus(sessionId);
    const state = useMemo(() => ({
        vimModeEnabled: preferences.vimMode,
        reasoningEnabled: preferences.reasoningEnabled,
        isShared: shareStatus?.shared,
    }), [preferences.vimMode, preferences.reasoningEnabled, shareStatus?.shared]);
    const results = useMemo(() => filterCommands(query, state), [query, state]);
    useEffect(() => {
        const element = document.getElementById(`command-item-${selectedIndex}`);
        element?.scrollIntoView({ block: 'nearest' });
    }, [selectedIndex]);
    useEffect(() => {
        onEnterSelect(results[selectedIndex]?.id);
    }, [results, selectedIndex, onEnterSelect]);
    useEffect(() => {
        const handleClickOutside = (e) => {
            const target = e.target;
            if (!target.closest('[data-command-popup]')) {
                onClose();
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, [onClose]);
    if (results.length === 0) {
        return (_jsx("div", { "data-command-popup": true, className: "absolute bottom-full left-0 right-0 mb-2 bg-card border border-border rounded-lg shadow-lg z-50 p-3", children: _jsx("span", { className: "text-muted-foreground text-sm", children: "No commands found" }) }));
    }
    return (_jsx("div", { "data-command-popup": true, className: "absolute bottom-full left-0 right-0 mb-2 bg-card border border-border rounded-lg shadow-lg max-h-[300px] overflow-y-auto z-50", children: results.map((command, index) => {
            const Icon = command.icon;
            return (_jsx("button", { type: "button", id: `command-item-${index}`, onMouseDown: (e) => {
                    e.preventDefault();
                    onSelect(command.id);
                }, className: `w-full text-left px-3 py-2 hover:bg-accent ${index === selectedIndex ? 'bg-accent' : ''}`, children: _jsxs("div", { className: "flex items-center gap-3 w-full", children: [_jsx(Icon, { className: "w-4 h-4 flex-shrink-0 text-primary" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-mono text-sm font-medium text-foreground", children: command.label }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: getCommandDescription(command, state) })] })] }) }, command.id));
        }) }));
}
//# sourceMappingURL=CommandSuggestionsPopup.js.map