import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { SearchBox } from "../SearchBox.js";
import { Pane } from "./Pane.js";
export function FuzzyPicker(props) {
    const width = Math.max(42, Math.min(props.width - 2, 104));
    const selected = props.items[props.selectedIndex];
    return (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingBottom: 1, children: _jsxs(Pane, { title: props.title, tone: props.tone ?? "brand", width: width, children: [_jsx(SearchBox, { query: props.query, placeholder: props.placeholder, isFocused: true, isTerminalFocused: true, prefix: "/", width: width - 4, borderless: true }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: props.items.length === 0 ? (_jsx(Text, { color: "yellow", children: props.emptyMessage })) : (props.items.map((item, index) => {
                        const selectedRow = index === props.selectedIndex;
                        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: selectedRow ? "cyan" : "gray", inverse: selectedRow, children: selectedRow ? ">" : " " }), _jsx(Text, { children: " " }), _jsx(Box, { flexGrow: 1, children: props.renderItem(item, selectedRow) })] }, props.getKey(item)));
                    })) }), selected && props.renderPreview && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: props.renderPreview(selected) })), props.footer && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: props.footer }) }))] }) }));
}
