import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React, { useState, useMemo } from "react";
import { Box, Text, useInput } from "ink";
import { useTheme } from "../theme/theme.js";
import { stripTerminalFocusSequences } from "../utils/terminal-input.js";
export function SelectList({ items, onSelect, onCancel, initialIndex = 0, windowSize, }) {
    const theme = useTheme();
    const [selectedIndex, setSelectedIndex] = useState(initialIndex);
    const [filter, setFilter] = useState("");
    const filtered = useMemo(() => {
        if (!filter)
            return items;
        const lower = filter.toLowerCase();
        return items.filter((item) => item.label.toLowerCase().includes(lower) || item.value.toLowerCase().includes(lower));
    }, [items, filter]);
    useInput((input, key) => {
        const inputWithoutFocusReports = stripTerminalFocusSequences(input);
        if (!inputWithoutFocusReports && input)
            return;
        input = inputWithoutFocusReports;
        if (key.escape) {
            onCancel();
            return;
        }
        if (key.return) {
            if (filtered.length > 0) {
                onSelect(filtered[selectedIndex].value);
            }
            return;
        }
        if (key.upArrow) {
            setSelectedIndex((i) => Math.max(0, i - 1));
            return;
        }
        if (key.downArrow) {
            setSelectedIndex((i) => Math.min(filtered.length - 1, i + 1));
            return;
        }
        if (key.backspace || key.delete) {
            setFilter((f) => f.slice(0, -1));
            setSelectedIndex(0);
            return;
        }
        if (input && !key.ctrl && !key.meta) {
            setFilter((f) => f + input);
            setSelectedIndex(0);
        }
    });
    const total = filtered.length;
    const clampedIndex = Math.min(Math.max(selectedIndex, 0), Math.max(0, total - 1));
    const useWindow = windowSize !== undefined && windowSize > 0 && total > windowSize;
    const start = useWindow
        ? Math.max(0, Math.min(clampedIndex - Math.floor(windowSize / 2), total - windowSize))
        : 0;
    const end = useWindow ? Math.min(start + windowSize, total) : total;
    const visible = useWindow ? filtered.slice(start, end) : filtered;
    const hasAbove = useWindow && start > 0;
    const hasBelow = useWindow && end < total;
    return (_jsxs(Box, { flexDirection: "column", children: [filter && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: theme.textDim, children: ["Filter: ", filter] }) })), hasAbove && _jsxs(Text, { color: theme.textDim, children: [" \u2191 ", start, " more"] }), visible.map((item, i) => {
                const index = useWindow ? start + i : i;
                return (_jsxs(Box, { children: [_jsxs(Text, { color: index === clampedIndex ? theme.primary : theme.text, children: [index === clampedIndex ? "❯ " : "  ", item.label] }), item.description && _jsxs(Text, { color: theme.textDim, children: [" \u2014 ", item.description] })] }, item.value));
            }), hasBelow && _jsxs(Text, { color: theme.textDim, children: [" \u2193 ", total - end, " more"] }), filtered.length === 0 && _jsx(Text, { color: theme.textDim, children: "No matches" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.textDim, children: "\u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel" }) })] }));
}
//# sourceMappingURL=SelectList.js.map