import * as React from 'react';
import { Box, Text, useInput } from 'ink';
export const HELP_SECTION_ID = 'Help';
export const FormHeader = props => {
    const sections = props.form.sections;
    useInput((input, key) => {
        let id = undefined;
        if (key.rightArrow) {
            id = props.currentTab + 1;
        }
        else if (key.leftArrow) {
            id = props.currentTab - 1;
        }
        else if (/\d/.test(input)) {
            id = parseInt(input) - 1;
        }
        if (id !== undefined && id >= 0 && id < sections.length) {
            props.onChangeTab(id);
        }
    }, { isActive: !props.editingField });
    return (React.createElement(Box, { borderStyle: "double", width: "100%", flexDirection: "column" },
        React.createElement(Box, { width: "100%" },
            React.createElement(Box, { flexGrow: 1 },
                React.createElement(Text, { bold: true }, props.form.title)),
            React.createElement(Box, null,
                React.createElement(Text, null, !props.editingField ? 'Use arrow keys to move around' : 'Press ESC to cancel, or Enter to complete field'))),
        React.createElement(Box, { width: "100%" },
            React.createElement(Box, null, !props.editingField ? (sections.map((section, id) => (React.createElement(Box, { key: section.title },
                React.createElement(Text, { color: "gray" },
                    "[",
                    id + 1,
                    "] "),
                React.createElement(Text, { color: props.currentTab === id ? 'blue' : undefined, underline: props.currentTab === id }, section.title),
                React.createElement(Text, null, " "))))) : (React.createElement(Box, null,
                React.createElement(Text, null,
                    "Editing ",
                    props.editingField)))))));
};
