import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { getCommandPaletteItems, } from "../prompt/commandPalette.js";
import { FuzzyPicker } from "./design/FuzzyPicker.js";
import { padRightCells, truncateCells } from "./design/textLayout.js";
export function CommandPalette(props) {
    const commands = getCommandPaletteItems(props.commands, props.query, 9);
    return (_jsx(FuzzyPicker, { title: "Command Palette", query: props.query, placeholder: "Search commands", items: commands, selectedIndex: props.selectedIndex, width: props.width, emptyMessage: "No matching commands", footer: "Enter insert  Esc close  Up/Down select  Ctrl+U clear", getKey: (command) => command.id, renderItem: renderCommandRow, renderPreview: renderCommandPreview }));
}
function renderCommandRow(command, selected) {
    const usage = command.usage ? ` ${command.usage}` : "";
    return (_jsxs(Text, { color: selected ? "white" : "gray", children: [_jsx(Text, { color: selected ? "cyan" : "gray", children: padRightCells(`/${command.name}${usage}`, 32) }), truncateCells(command.description, 62)] }));
}
function renderCommandPreview(command) {
    const aliases = command.aliases.length > 0 ? command.aliases.map((alias) => `/${alias}`).join(", ") : "none";
    const usage = command.usage ? `/${command.name} ${command.usage}` : `/${command.name}`;
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: ["usage ", _jsx(Text, { color: "white", children: usage })] }), _jsxs(Text, { color: "gray", children: ["aliases ", _jsx(Text, { color: "white", children: aliases })] }), _jsxs(Text, { color: "gray", children: ["match ", _jsx(Text, { color: "white", children: command.match })] })] }));
}
