import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import { Box, Text } from 'ink';
import { theme } from '../semantic-colors.js';
import { useKeypress } from '../hooks/useKeypress.js';
import { Command } from '../key/keyMatchers.js';
import { useKeyMatchers } from '../hooks/useKeyMatchers.js';
/** Maximum hooks to show at once before scrolling is needed */
const DEFAULT_MAX_VISIBLE_HOOKS = 8;
/**
 * Dialog component for displaying hooks in a styled box.
 * Replaces inline chat history display with a modal-style dialog.
 * Supports scrolling with up/down arrow keys when there are many hooks.
 */
export const HooksDialog = ({ hooks, onClose, maxVisibleHooks = DEFAULT_MAX_VISIBLE_HOOKS, }) => {
    const keyMatchers = useKeyMatchers();
    const [scrollOffset, setScrollOffset] = useState(0);
    // Flatten hooks with their event names for easier scrolling
    const flattenedHooks = useMemo(() => {
        const result = [];
        // Group hooks by event name
        const hooksByEvent = hooks.reduce((acc, hook) => {
            if (!acc[hook.eventName]) {
                acc[hook.eventName] = [];
            }
            acc[hook.eventName].push(hook);
            return acc;
        }, {});
        // Flatten into displayable items
        Object.entries(hooksByEvent).forEach(([eventName, eventHooks]) => {
            result.push({ type: 'header', eventName });
            eventHooks.forEach((hook) => {
                result.push({ type: 'hook', eventName, hook });
            });
        });
        return result;
    }, [hooks]);
    const totalItems = flattenedHooks.length;
    const needsScrolling = totalItems > maxVisibleHooks;
    const maxScrollOffset = Math.max(0, totalItems - maxVisibleHooks);
    // Handle keyboard navigation
    useKeypress((key) => {
        if (keyMatchers[Command.ESCAPE](key)) {
            onClose();
            return true;
        }
        // Scroll navigation
        if (needsScrolling) {
            if (keyMatchers[Command.DIALOG_NAVIGATION_UP](key)) {
                setScrollOffset((prev) => Math.max(0, prev - 1));
                return true;
            }
            if (keyMatchers[Command.DIALOG_NAVIGATION_DOWN](key)) {
                setScrollOffset((prev) => Math.min(maxScrollOffset, prev + 1));
                return true;
            }
        }
        return false;
    }, { isActive: true });
    // Get visible items based on scroll offset
    const visibleItems = needsScrolling
        ? flattenedHooks.slice(scrollOffset, scrollOffset + maxVisibleHooks)
        : flattenedHooks;
    const showScrollUp = needsScrolling && scrollOffset > 0;
    const showScrollDown = needsScrolling && scrollOffset < maxScrollOffset;
    return (_jsx(Box, { borderStyle: "round", borderColor: theme.border.default, flexDirection: "column", padding: 1, marginY: 1, width: "100%", children: hooks.length === 0 ? (_jsx(_Fragment, { children: _jsx(Text, { color: theme.text.primary, children: "No hooks configured." }) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.status.warning, bold: true, underline: true, children: "Security Warning:" }), _jsx(Text, { color: theme.status.warning, wrap: "wrap", children: "Hooks can execute arbitrary commands on your system. Only use hooks from sources you trust. Review hook scripts carefully." })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { wrap: "wrap", children: ["Learn more:", ' ', _jsx(Text, { color: theme.text.link, children: "https://geminicli.com/docs/hooks" })] }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.text.accent, children: "Configured Hooks" }) }), showScrollUp && (_jsx(Box, { paddingLeft: 2, minWidth: 0, children: _jsx(Text, { color: theme.text.secondary, children: "\u25B2" }) })), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: visibleItems.map((item, index) => {
                        if (item.type === 'header') {
                            return (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.text.link, children: item.eventName }) }, `header-${item.eventName}-${index}`));
                        }
                        const hook = item.hook;
                        const hookName = hook.config.name || hook.config.command || 'unknown';
                        const hookKey = `${item.eventName}:${hook.source}:${hook.config.name ?? ''}:${hook.config.command ?? ''}`;
                        const statusColor = hook.enabled
                            ? theme.status.success
                            : theme.text.secondary;
                        const statusText = hook.enabled ? 'enabled' : 'disabled';
                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.text.accent, bold: true, children: hookName }), _jsx(Text, { color: statusColor, children: ` [${statusText}]` })] }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [hook.config.description && (_jsx(Text, { color: theme.text.primary, italic: true, wrap: "wrap", children: hook.config.description })), _jsxs(Text, { color: theme.text.secondary, wrap: "wrap", children: ["Source: ", hook.source, hook.config.name &&
                                                    hook.config.command &&
                                                    ` | Command: ${hook.config.command}`, hook.matcher && ` | Matcher: ${hook.matcher}`, hook.sequential && ` | Sequential`, hook.config.timeout &&
                                                    ` | Timeout: ${hook.config.timeout}s`] })] })] }, hookKey));
                    }) }), showScrollDown && (_jsx(Box, { paddingLeft: 2, minWidth: 0, children: _jsx(Text, { color: theme.text.secondary, children: "\u25BC" }) })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.text.secondary, wrap: "wrap", children: ["Tip: Use ", _jsxs(Text, { bold: true, children: ["/hooks enable ", '<hook-name>'] }), " or", ' ', _jsxs(Text, { bold: true, children: ["/hooks disable ", '<hook-name>'] }), " to toggle individual hooks. Use ", _jsx(Text, { bold: true, children: "/hooks enable-all" }), " or", ' ', _jsx(Text, { bold: true, children: "/hooks disable-all" }), " to toggle all hooks at once."] }) })] })) }));
};
//# sourceMappingURL=HooksDialog.js.map