import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Box, Text } from "ink";
import { useTheme } from "../theme/theme.js";
const MAX_TASKS_TO_SHOW = 8;
function statusGlyph(status) {
    if (status === "done")
        return "✓";
    if (status === "in-progress")
        return "~";
    return " ";
}
export function TaskPickerMenu({ tasks, selectedIndex, width }) {
    const theme = useTheme();
    const runnableTasks = tasks.filter((task) => task.status !== "done");
    if (runnableTasks.length === 0) {
        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, width: width, children: [_jsx(Text, { color: theme.textDim, children: "-- tasks --" }), _jsx(Text, { color: theme.textDim, children: "No pending tasks." })] }));
    }
    const total = runnableTasks.length;
    const idx = Math.min(Math.max(selectedIndex, 0), total - 1);
    const start = total <= MAX_TASKS_TO_SHOW
        ? 0
        : Math.max(0, Math.min(idx - Math.floor(MAX_TASKS_TO_SHOW / 2), total - MAX_TASKS_TO_SHOW));
    const end = Math.min(start + MAX_TASKS_TO_SHOW, total);
    const visible = runnableTasks.slice(start, end);
    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, width: width, children: [start > 0 && _jsx(Text, { color: theme.text, children: "\u25B2" }), _jsx(Text, { color: theme.textDim, children: "-- tasks --" }), visible.map((task, i) => {
                const actualIndex = start + i;
                const isSelected = actualIndex === idx;
                const textColor = isSelected ? theme.commandColor : theme.textDim;
                return (_jsxs(Box, { flexDirection: "row", backgroundColor: isSelected ? theme.border : undefined, children: [_jsx(Box, { width: 4, flexShrink: 0, children: _jsxs(Text, { color: textColor, children: ["[", statusGlyph(task.status), "]"] }) }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: _jsx(Text, { color: textColor, wrap: "truncate", children: task.title }) })] }, task.id));
            }), end < total && _jsx(Text, { color: theme.textDim, children: "\u25BC" }), _jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { color: theme.primary, children: "\u2191\u2193" }), " select · ", _jsx(Text, { color: theme.primary, children: "Enter" }), " start · ", _jsx(Text, { color: theme.primary, children: "d" }), " delete · ", _jsx(Text, { color: theme.primary, children: "r" }), " run all · ", _jsx(Text, { color: theme.primary, children: "Esc" }), " close"] })] }));
}
//# sourceMappingURL=TaskPickerMenu.js.map