import React, { useState } from 'react';
import { Box, Text, useInput } from 'ink';
/**
 * Multi-choice question component with Tab/arrow navigation
 * and an "Other" option for free-text input.
 */
export function TabbedQuestion({ question, options, onAnswer }) {
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [isOther, setIsOther] = useState(false);
    const [otherText, setOtherText] = useState('');
    // All options plus "Other"
    const allOptions = [...options, 'Other'];
    useInput((input, key) => {
        if (isOther) {
            if (key.return) {
                onAnswer(otherText || options[0]);
                return;
            }
            if (key.escape) {
                setIsOther(false);
                return;
            }
            if (key.backspace || key.delete) {
                setOtherText(prev => prev.slice(0, -1));
                return;
            }
            if (input && !key.ctrl && !key.meta) {
                setOtherText(prev => prev + input);
            }
            return;
        }
        if (key.tab || key.downArrow) {
            setSelectedIndex(prev => (prev + 1) % allOptions.length);
        }
        else if (key.upArrow) {
            setSelectedIndex(prev => (prev - 1 + allOptions.length) % allOptions.length);
        }
        else if (key.return) {
            if (selectedIndex === options.length) {
                // "Other" selected
                setIsOther(true);
            }
            else {
                onAnswer(options[selectedIndex]);
            }
        }
    });
    return (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
        React.createElement(Text, { bold: true, color: "cyan" }, question),
        React.createElement(Box, { flexDirection: "column", marginTop: 1, marginLeft: 2 }, allOptions.map((option, idx) => (React.createElement(Box, { key: idx },
            React.createElement(Text, { color: idx === selectedIndex ? 'green' : 'white' },
                idx === selectedIndex ? '> ' : '  ',
                option))))),
        isOther && (React.createElement(Box, { marginTop: 1, marginLeft: 2 },
            React.createElement(Text, { color: "yellow" }, "Your answer: "),
            React.createElement(Text, null, otherText),
            React.createElement(Text, { color: "gray" }, "\u2588"))),
        React.createElement(Box, { marginTop: 1 },
            React.createElement(Text, { dimColor: true, color: "gray" },
                "Tab/arrows to navigate, Enter to select",
                isOther ? ', Esc to go back' : ''))));
}
//# sourceMappingURL=TabbedQuestion.js.map