import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from 'ink';
const MAX_VISIBLE_SESSIONS = 8;
export function SessionPickerPanel({ query, sessions, activeSessionId, highlightedIndex, }) {
    const { visibleSessions, startIndex } = getVisibleSessions(sessions, highlightedIndex);
    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Session picker" }), _jsx(Text, { dimColor: true, children: query ? `Search: ${query}` : 'Type after /session choose to filter. Use up/down or Tab to choose.' }), visibleSessions.length > 0 ?
                visibleSessions.map((session, index) => {
                    const absoluteIndex = startIndex + index;
                    const isHighlighted = absoluteIndex === highlightedIndex;
                    const isActive = session.id === activeSessionId;
                    const marker = isHighlighted ? '◉' : '○';
                    const suffix = isActive ? ' (current)' : '';
                    return (_jsx(Text, { color: isHighlighted ? 'cyan' : undefined, dimColor: !isHighlighted, children: `${marker} ${absoluteIndex + 1}. ${session.name} [${session.id}]${suffix}` }, session.id));
                })
                : _jsx(Text, { dimColor: true, children: "No matching sessions." })] }));
}
function getVisibleSessions(sessions, highlightedIndex) {
    if (sessions.length <= MAX_VISIBLE_SESSIONS) {
        return { visibleSessions: sessions, startIndex: 0 };
    }
    const half = Math.floor(MAX_VISIBLE_SESSIONS / 2);
    const startIndex = Math.min(Math.max(0, highlightedIndex - half), Math.max(0, sessions.length - MAX_VISIBLE_SESSIONS));
    return {
        visibleSessions: sessions.slice(startIndex, startIndex + MAX_VISIBLE_SESSIONS),
        startIndex,
    };
}
//# sourceMappingURL=SessionPickerPanel.js.map