import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { SelectList } from "../design/SelectList.js";
export const AGENT_COLOR_OPTIONS = [
    { id: "cyan", label: "Cyan", detail: "DeepSeek default", terminalColor: "cyan" },
    { id: "green", label: "Green", detail: "cache and success work", terminalColor: "green" },
    { id: "yellow", label: "Yellow", detail: "review and caution", terminalColor: "yellow" },
    { id: "magenta", label: "Magenta", detail: "creative planning", terminalColor: "magenta" },
    { id: "blue", label: "Blue", detail: "research and docs", terminalColor: "blue" },
    { id: "red", label: "Red", detail: "security and risk", terminalColor: "red" },
    { id: "gray", label: "Gray", detail: "quiet background agent", terminalColor: "gray" },
];
export function colorPickerOptions(selectedColor) {
    const selected = selectedColor?.trim().toLowerCase() || "cyan";
    return AGENT_COLOR_OPTIONS.map((option) => ({
        id: option.id,
        label: option.label,
        detail: option.detail,
        selected: option.id === selected,
        tone: option.id === selected ? "brand" : "default",
    }));
}
export function ColorPicker(props) {
    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: "Agent color" }), _jsx(SelectList, { options: colorPickerOptions(props.selectedColor), selectedIndex: props.selectedIndex, visibleCount: 7, width: props.width })] }));
}
