import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React, { useMemo, useState } from "react";
import { Box, Text, useInput } from "ink";
import { useTerminalSize } from "../hooks/useTerminalSize.js";
import { useTheme } from "../theme/theme.js";
import { stripTerminalFocusSequences } from "../utils/terminal-input.js";
const DEFAULT_MAX_ITEMS_TO_SHOW = 8;
export function SlashStyledSelectList({ items, onSelect, onCancel, initialIndex = 0, maxItemsToShow = DEFAULT_MAX_ITEMS_TO_SHOW, width: widthOverride, }) {
    const theme = useTheme();
    const { columns } = useTerminalSize();
    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) ||
            item.description.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) {
            const selected = filtered[selectedIndex];
            if (selected)
                onSelect(selected.value);
            return;
        }
        if (key.upArrow) {
            setSelectedIndex((i) => Math.max(0, i - 1));
            return;
        }
        if (key.downArrow) {
            setSelectedIndex((i) => (filtered.length === 0 ? 0 : 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 idx = Math.min(Math.max(selectedIndex, 0), Math.max(0, total - 1));
    const start = total <= maxItemsToShow
        ? 0
        : Math.max(0, Math.min(idx - Math.floor(maxItemsToShow / 2), total - maxItemsToShow));
    const end = Math.min(start + maxItemsToShow, total);
    const visible = filtered.slice(start, end);
    const width = widthOverride ?? Math.max(20, columns);
    const maxLabelLength = Math.max(0, ...filtered.map((item) => item.label.length));
    const labelColumnWidth = Math.min(maxLabelLength, Math.floor(width * 0.5));
    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, width: width, children: [filter && _jsxs(Text, { color: theme.textDim, children: ["Filter: ", filter] }), start > 0 && _jsx(Text, { color: theme.text, children: "\u25B2" }), visible.map((item, 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: labelColumnWidth, flexShrink: 0, children: _jsx(Text, { color: textColor, children: item.label }) }), _jsx(Box, { flexGrow: 1, paddingLeft: 3, children: _jsx(Text, { color: textColor, wrap: "truncate", children: item.description.slice(0, 100) }) })] }, item.value));
            }), end < total && _jsx(Text, { color: theme.textDim, children: "\u25BC" }), total > maxItemsToShow && (_jsxs(Text, { color: theme.textDim, children: ["(", idx + 1, "/", total, ")"] })), total === 0 && _jsx(Text, { color: theme.textDim, children: "No matches" })] }));
}
//# sourceMappingURL=SlashStyledSelectList.js.map