import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { Box, Text } from 'ink';
import { t } from '../../i18n/index.js';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { getOrderedStickyTodos } from '../utils/todoSnapshot.js';
const STATUS_ICONS = {
    pending: '○',
    in_progress: '◐',
    completed: '●',
};
export const StickyTodoList = ({ todos, width, }) => {
    const orderedTodos = useMemo(() => getOrderedStickyTodos(todos), [todos]);
    const todoNumberById = useMemo(() => new Map(todos.map((todo, index) => [todo.id, `${index + 1}.`])), [todos]);
    if (todos.length === 0) {
        return null;
    }
    const numberColumnWidth = String(orderedTodos.length).length + 2;
    return (_jsxs(Box, { marginX: 2, width: width, flexDirection: "column", borderStyle: "round", borderColor: theme.border.default, paddingX: 1, children: [_jsx(Text, { color: theme.text.secondary, bold: true, children: t('Current tasks') }), orderedTodos.map((todo, index) => {
                const todoNumber = todoNumberById.get(todo.id) ?? `${index + 1}.`;
                const itemColor = todo.status === 'in_progress'
                    ? Colors.AccentGreen
                    : Colors.Foreground;
                return (_jsxs(Box, { flexDirection: "row", minHeight: 1, children: [_jsx(Box, { width: numberColumnWidth, children: _jsx(Text, { color: theme.text.secondary, children: todoNumber }) }), _jsx(Box, { width: 2, children: _jsx(Text, { color: itemColor, children: STATUS_ICONS[todo.status] }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { color: itemColor, strikethrough: todo.status === 'completed', wrap: "wrap", children: todo.content }) })] }, todo.id));
            })] }));
};
//# sourceMappingURL=StickyTodoList.js.map