import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { SelectList } from "./design/SelectList.js";
import { StatusBadge } from "./design/StatusBadge.js";
import { truncateCells } from "./design/textLayout.js";
import { toneColor } from "./design/terminalTheme.js";
export function ThemePicker(props) {
    const width = props.width ?? 96;
    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: "gray", children: [props.model.title, " "] }), _jsx(StatusBadge, { label: `${props.model.options.length}`, tone: "brand" }), _jsxs(Text, { color: "gray", children: [" ", truncateCells(props.model.subtitle, Math.max(16, width - 24))] })] }), _jsx(SelectList, { options: props.model.options.map(themePickerSelectOption), selectedIndex: props.model.selectedIndex, visibleCount: 6, width: width }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "gray", children: "preview " }), _jsx(Text, { color: toneColor("brand"), children: truncateCells(props.model.preview, Math.max(12, width - 12)) })] }), _jsx(Text, { color: "gray", children: truncateCells(props.model.footer, Math.max(18, width - 4)) })] }));
}
export function themePickerModel(input) {
    const options = input.themes.map((theme) => ({
        id: theme.name,
        label: theme.label,
        status: theme.name === input.current.theme ? "current" : "available",
        tone: theme.name === input.current.theme ? "success" : themeTone(theme.name),
        detail: theme.name,
        description: theme.description,
        selected: theme.name === input.current.theme,
    }));
    return {
        title: "theme picker",
        subtitle: `source ${input.current.source}; current ${input.current.definition.label}`,
        options,
        selectedIndex: Math.max(0, options.findIndex((option) => option.selected)),
        preview: "DeepSeekCode > /cache plan <goal> | safe shell off | cache reuse first",
        footer: "/theme set <name> applies a project theme; DEEPSEEKCODE_THEME overrides per process",
    };
}
function themePickerSelectOption(option) {
    return {
        id: option.id,
        label: option.label,
        detail: `${option.status} | ${option.detail}`,
        description: option.description,
        selected: option.selected,
        tone: option.tone,
    };
}
function themeTone(name) {
    if (name.includes("cache"))
        return "success";
    if (name.includes("contrast"))
        return "warning";
    if (name.includes("classic") || name.includes("warm"))
        return "brand";
    return "muted";
}
