import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from 'ink';
const MAX_VISIBLE_MODELS = 8;
export function ModelPickerPanel({ query, models, activeModel, highlightedIndex, }) {
    const { visibleModels, startIndex } = getVisibleModels(models, highlightedIndex);
    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Model picker" }), _jsx(Text, { dimColor: true, children: query ? `Search: ${query}` : 'Type after /model set to filter. Use up/down or Tab to choose.' }), visibleModels.length > 0 ?
                visibleModels.map((model, index) => {
                    const absoluteIndex = startIndex + index;
                    const isHighlighted = absoluteIndex === highlightedIndex;
                    const isActive = model.id === activeModel;
                    const marker = isHighlighted ? '◉' : '○';
                    const suffix = [
                        isActive ? '(current)' : undefined,
                        model.disabled ? `(${model.disabledReason ?? 'unavailable'})` : undefined,
                    ].filter(Boolean).join(' ');
                    return (_jsxs(Text, { color: isHighlighted ? 'cyan' : model.disabled ? 'yellow' : undefined, dimColor: !isHighlighted && !model.disabled, children: [`${marker} ${model.id}${suffix ? ` ${suffix}` : ''}`, isHighlighted && model.disabled ? ` - ${model.disabledReason ?? 'unavailable'}` : ''] }, model.id));
                })
                : _jsx(Text, { dimColor: true, children: "No matching models." })] }));
}
function getVisibleModels(models, highlightedIndex) {
    if (models.length <= MAX_VISIBLE_MODELS) {
        return { visibleModels: models, startIndex: 0 };
    }
    const half = Math.floor(MAX_VISIBLE_MODELS / 2);
    const startIndex = Math.min(Math.max(0, highlightedIndex - half), Math.max(0, models.length - MAX_VISIBLE_MODELS));
    return {
        visibleModels: models.slice(startIndex, startIndex + MAX_VISIBLE_MODELS),
        startIndex,
    };
}
//# sourceMappingURL=ModelPickerPanel.js.map