import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { symbols } from "./theme.js";
const MAX_VISIBLE = 8;
/**
 * Command palette picker for the experimental shell: a real categorized list
 * with a live preview pane for the highlighted entry.
 */
export function CommandPalette(props) {
    if (props.items.length === 0) {
        return null;
    }
    const selectedIndex = Math.max(0, Math.min(props.selectedIndex, props.items.length - 1));
    const startIndex = Math.max(0, Math.min(selectedIndex - Math.floor(MAX_VISIBLE / 2), Math.max(0, props.items.length - MAX_VISIBLE)));
    const visibleItems = props.items.slice(startIndex, startIndex + MAX_VISIBLE);
    const selectedItem = props.items[selectedIndex];
    const wide = props.width >= 96;
    const labelWidth = wide ? 22 : 18;
    return (_jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: "cyan", bold: true, children: [symbols.arrow, " Command palette"] }), _jsxs(Text, { color: "gray", children: [selectedIndex + 1, "/", props.items.length, " \u00B7 \u2191\u2193 move \u00B7 \u23CE apply \u00B7 esc clear"] })] }), _jsxs(Box, { flexDirection: wide ? "row" : "column", marginTop: 1, children: [_jsx(Box, { flexDirection: "column", width: wide ? Math.floor(props.width * 0.52) : undefined, children: visibleItems.map((item, index) => {
                            const absoluteIndex = startIndex + index;
                            const isSelected = absoluteIndex === selectedIndex;
                            return (_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? symbols.todoActive : " " }) }), _jsx(Box, { width: 11, children: _jsx(Text, { color: "gray", dimColor: !isSelected, children: item.category.slice(0, 10) }) }), _jsx(Box, { width: labelWidth, children: _jsx(Text, { color: isSelected ? "white" : "cyan", bold: isSelected, wrap: "truncate", children: item.label }) }), !wide ? (_jsx(Text, { color: isSelected ? "white" : "gray", dimColor: !isSelected, wrap: "truncate", children: item.detail })) : null] }, item.key));
                        }) }), selectedItem ? (_jsxs(Box, { flexDirection: "column", flexGrow: 1, marginLeft: wide ? 2 : 0, marginTop: wide ? 0 : 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { color: "cyan", bold: true, wrap: "truncate", children: selectedItem.label }), _jsx(Text, { color: "white", wrap: "wrap", children: selectedItem.detail }), _jsx(Text, { color: "gray", wrap: "truncate", children: selectedItem.hint ? `${symbols.bullet} ${selectedItem.hint}` : `${symbols.bullet} ${selectedItem.category}` })] })) : null] })] }));
}
//# sourceMappingURL=CommandPalette.js.map