import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text, useInput } from 'ink';
import SelectInput from 'ink-select-input';
import { TitledBoxWithPreferences } from '../components/ui/titled-box.js';
import { useTerminalWidth } from '../hooks/useTerminalWidth.js';
import { useTheme } from '../hooks/useTheme.js';
/**
 * Shared layout for selectors built on `TitledBoxWithPreferences` +
 * `SelectInput` + escape-to-cancel + loading/error states. Used by
 * `model-selector`. Selectors with bespoke layout
 * (e.g. session-selector, checkpoint-selector, ide-selector) do not use this
 * because they extend the pattern with additional state machines or layouts
 * that don't fit a generic shape.
 */
export function ItemSelector({ title, items, onSelect, onCancel, loading, loadingMessage = 'Loading…', error, errorTitle, errorHint, }) {
    const boxWidth = useTerminalWidth();
    const { colors } = useTheme();
    useInput((_, key) => {
        if (key.escape) {
            onCancel();
        }
    });
    if (loading) {
        return (_jsx(TitledBoxWithPreferences, { title: title, width: boxWidth, borderColor: colors.primary, paddingX: 2, paddingY: 1, marginBottom: 1, children: _jsx(Text, { color: colors.secondary, children: loadingMessage }) }));
    }
    if (error) {
        return (_jsx(TitledBoxWithPreferences, { title: errorTitle ?? `${title} - Error`, width: boxWidth, borderColor: colors.error, paddingX: 2, paddingY: 1, marginBottom: 1, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.error, children: error }), errorHint && _jsx(Text, { color: colors.secondary, children: errorHint }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.secondary, children: "Press Escape to cancel" }) })] }) }));
    }
    return (_jsx(TitledBoxWithPreferences, { title: title, width: boxWidth, borderColor: colors.primary, paddingX: 2, paddingY: 1, marginBottom: 1, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(SelectInput, { items: items, onSelect: item => onSelect(item.value) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.secondary, children: "Press Escape to cancel" }) })] }) }));
}
//# sourceMappingURL=item-selector.js.map