/**
 * Keyboard Shortcuts Help Overlay
 *
 * Displays categorized keyboard shortcuts:
 * - Toggle with ? or F1
 * - Categorized by function
 * - Visual key representations
 * - Context-sensitive help
 */
import React, { useState } from 'react';
import { Box, Text, useInput } from 'ink';
import { useTheme } from '../context/theme-context.js';
/**
 * All available keyboard shortcuts
 */
const KEYBOARD_SHORTCUTS = [
    // Navigation
    { keys: '↑ ↓', description: 'Navigate command history', category: 'Navigation' },
    { keys: 'Tab', description: 'Autocomplete command', category: 'Navigation' },
    { keys: 'Shift+Tab', description: 'Toggle auto-edit mode', category: 'Navigation' },
    // Editing
    { keys: 'Ctrl+C', description: 'Clear current input / Interrupt', category: 'Editing' },
    { keys: 'Ctrl+U', description: 'Clear line', category: 'Editing' },
    { keys: 'Ctrl+W', description: 'Delete word', category: 'Editing' },
    { keys: 'Ctrl+K', description: 'Delete to end of line', category: 'Editing' },
    // Tools
    { keys: '/help', description: 'Show available commands', category: 'Tools' },
    { keys: '/model', description: 'Switch AI model', category: 'Tools' },
    { keys: '/mode', description: 'Change agent mode', category: 'Tools' },
    { keys: '/commit', description: 'Create git commit', category: 'Tools' },
    { keys: '/review', description: 'Code review', category: 'Tools' },
    { keys: '/test', description: 'Run tests', category: 'Tools' },
    // View
    { keys: '?', description: 'Toggle this help', category: 'View' },
    { keys: '/theme', description: 'Change theme', category: 'View' },
    { keys: '/avatar', description: 'Change avatars', category: 'View' },
    { keys: '/stats', description: 'Show statistics', category: 'View' },
    // Session
    { keys: 'exit', description: 'Quit application', category: 'Session' },
    { keys: 'Esc', description: 'Cancel current operation', category: 'Session' },
    { keys: '/clear', description: 'Clear chat history', category: 'Session' },
];
/**
 * Render a keyboard key with styling
 */
function KeyboardKey({ keyName }) {
    const { colors } = useTheme();
    return (React.createElement(Box, { borderStyle: "round", borderColor: colors.border, paddingX: 1, marginRight: 1 },
        React.createElement(Text, { bold: true, color: colors.accent }, keyName)));
}
/**
 * Render multiple keys (e.g., "Ctrl+C")
 */
function KeyboardKeys({ keys }) {
    const keyParts = keys.split('+');
    return (React.createElement(Box, null, keyParts.map((key, index) => (React.createElement(React.Fragment, { key: index },
        React.createElement(KeyboardKey, { keyName: key.trim() }),
        index < keyParts.length - 1 && (React.createElement(Text, { dimColor: true }, "+")))))));
}
/**
 * Keyboard Help Overlay Component
 */
export function KeyboardHelp({ isVisible, onClose, categories, }) {
    const { colors } = useTheme();
    // Handle input to close help
    useInput((input, key) => {
        if (!isVisible)
            return;
        if (input === '?' || key.escape || key.return) {
            onClose();
        }
    });
    if (!isVisible)
        return null;
    // Filter shortcuts by category if specified
    const shortcuts = categories
        ? KEYBOARD_SHORTCUTS.filter((s) => categories.includes(s.category))
        : KEYBOARD_SHORTCUTS;
    // Group shortcuts by category
    const groupedShortcuts = shortcuts.reduce((acc, shortcut) => {
        if (!acc[shortcut.category]) {
            acc[shortcut.category] = [];
        }
        acc[shortcut.category].push(shortcut);
        return acc;
    }, {});
    const categoryOrder = [
        'Navigation',
        'Editing',
        'Tools',
        'View',
        'Session',
    ];
    return (React.createElement(Box, { flexDirection: "column", borderStyle: "double", borderColor: colors.primary, paddingX: 2, paddingY: 1 },
        React.createElement(Box, { justifyContent: "center", marginBottom: 1 },
            React.createElement(Text, { bold: true, color: colors.primary }, "\u2328\uFE0F  Keyboard Shortcuts")),
        categoryOrder.map((category) => {
            const categoryShortcuts = groupedShortcuts[category];
            if (!categoryShortcuts || categoryShortcuts.length === 0)
                return null;
            return (React.createElement(Box, { key: category, flexDirection: "column", marginBottom: 1 },
                React.createElement(Box, { marginBottom: 1 },
                    React.createElement(Text, { bold: true, color: colors.secondary }, category)),
                categoryShortcuts.map((shortcut, index) => (React.createElement(Box, { key: index, marginBottom: 0 },
                    React.createElement(Box, { width: 30 }, shortcut.keys.includes('+') ? (React.createElement(KeyboardKeys, { keys: shortcut.keys })) : (React.createElement(KeyboardKey, { keyName: shortcut.keys }))),
                    React.createElement(Text, { color: colors.text }, shortcut.description))))));
        }),
        React.createElement(Box, { justifyContent: "center", marginTop: 1, borderStyle: "single", borderColor: colors.border, paddingX: 1 },
            React.createElement(Text, { dimColor: true },
                "Press ",
                React.createElement(Text, { bold: true, color: colors.accent }, "?"),
                ", ",
                React.createElement(Text, { bold: true, color: colors.accent }, "Esc"),
                ", or ",
                React.createElement(Text, { bold: true, color: colors.accent }, "Enter"),
                " to close"))));
}
/**
 * Hook to manage keyboard help visibility
 */
export function useKeyboardHelp() {
    const [isVisible, setIsVisible] = useState(false);
    const toggle = () => setIsVisible((prev) => !prev);
    const show = () => setIsVisible(true);
    const hide = () => setIsVisible(false);
    return {
        isVisible,
        toggle,
        show,
        hide,
    };
}
/**
 * Keyboard Help Button
 *
 * Shows a button/hint to press ? for help
 */
export function KeyboardHelpButton() {
    const { colors } = useTheme();
    return (React.createElement(Box, null,
        React.createElement(Text, { dimColor: true },
            "Press ",
            React.createElement(Text, { bold: true, color: colors.accent }, "?"),
            " for help")));
}
export default KeyboardHelp;
//# sourceMappingURL=KeyboardHelp.js.map