import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Text, useFocus, useInput } from 'ink';
import BigText from 'ink-big-text';
import Gradient from 'ink-gradient';
import SelectInput from 'ink-select-input';
import { useMemo, useState } from 'react';
import { TitledBoxWithPreferences } from '../components/ui/titled-box.js';
import { useTerminalWidth } from '../hooks/useTerminalWidth.js';
import { useTheme } from '../hooks/useTheme.js';
import { useTitleShape } from '../hooks/useTitleShape.js';
export default function TitleShapeSelector({ onComplete, onCancel, }) {
    const boxWidth = useTerminalWidth();
    const { colors } = useTheme();
    const { currentTitleShape, setCurrentTitleShape } = useTitleShape();
    // Store original shape for restore on cancel
    const [originalShape] = useState(currentTitleShape);
    // Auto-focus to ensure keyboard navigation works
    useFocus({ autoFocus: true, id: 'title-shape-selector' });
    // Handle escape key to cancel
    useInput((_, key) => {
        if (key.escape) {
            // Restore original shape on cancel
            setCurrentTitleShape(originalShape);
            onCancel();
        }
    });
    // Create title shape options
    const shapeOptions = [
        { label: 'Pill :- Demo Title', value: 'pill' },
        { label: 'Rounded :- ╭ Demo Title ╮', value: 'rounded' },
        { label: 'Square :- ┌ Demo Title ┐', value: 'square' },
        { label: 'Double :- ╔ Demo Title ╗', value: 'double' },
        { label: 'Arrow Left :- ← Demo Title →', value: 'arrow-left' },
        { label: 'Arrow Right :- → Demo Title ←', value: 'arrow-right' },
        { label: 'Arrow Double :- « Demo Title »', value: 'arrow-double' },
        { label: 'Angled Box :- ╱ Demo Title ╲', value: 'angled-box' },
        {
            label: 'Powerline Angled :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-angled',
        },
        {
            label: 'Powerline Angled Thin :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-angled-thin',
        },
        {
            label: 'Powerline Block :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-block',
        },
        {
            label: 'Powerline Block Alt :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-block-alt',
        },
        {
            label: 'Powerline Curved :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-curved',
        },
        {
            label: 'Powerline Curved Thin :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-curved-thin',
        },
        {
            label: 'Powerline Flame :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-flame',
        },
        {
            label: 'Powerline Flame Thin :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-flame-thin',
        },
        {
            label: 'Powerline Graph :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-graph',
        },
        {
            label: 'Powerline Ribbon :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-ribbon',
        },
        {
            label: 'Powerline Segment :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-segment',
        },
        {
            label: 'Powerline Segment Thin :-  Demo Title  (Requires Nerd Fonts)',
            value: 'powerline-segment-thin',
        },
    ];
    // Find index of current shape for initial selection
    const initialIndex = useMemo(() => {
        const index = shapeOptions.findIndex(option => option.value === originalShape);
        return index >= 0 ? index : 0;
    }, [originalShape]);
    const [_currentIndex, _setCurrentIndex] = useState(initialIndex);
    const handleSelect = (item) => {
        setCurrentTitleShape(item.value);
        onComplete(item.value);
    };
    // Handle shape preview during navigation
    const handleHighlight = (item) => {
        // Update the shape temporarily for preview
        setCurrentTitleShape(item.value);
    };
    // Get the display name for current shape
    const _getCurrentShapeName = () => {
        const currentOption = shapeOptions.find(option => option.value === currentTitleShape);
        return currentOption ? currentOption.label : 'Unknown';
    };
    return (_jsxs(_Fragment, { children: [_jsx(Gradient, { colors: [colors.primary, colors.tool], children: _jsx(BigText, { text: "Title Shapes", font: "tiny" }) }), _jsxs(TitledBoxWithPreferences, { title: "\u273B Choose your preferred title shape! \u273B", reversePowerline: true, width: boxWidth, borderColor: colors.primary, paddingX: 2, paddingY: 1, flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { paddingBottom: 1, children: _jsx(Text, { color: colors.text, children: "Tips for getting started:" }) }), _jsxs(Box, { paddingBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: colors.secondary, children: "1. Use arrow keys to navigate through the shape options." }), _jsx(Text, { color: colors.secondary, children: "2. Each option shows a preview of how the title will look." }), _jsx(Text, { color: colors.secondary, children: "3. Press Enter to select your preferred shape." }), _jsx(Text, { color: colors.secondary, children: "4. Press Esc to cancel and keep your current shape." }), _jsx(Text, { color: colors.secondary, children: "5. The CLI will remember your choice for all title boxes." })] }), _jsx(Text, { color: colors.text, children: "/help for help" })] }), _jsx(Box, { borderStyle: "round", width: boxWidth, borderColor: colors.primary, paddingX: 2, paddingY: 1, marginBottom: 1, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.secondary, children: "Select a title shape" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.secondary, children: "\u2191/\u2193 Navigate \u2022 Enter Select \u2022 Esc Cancel" }) }), _jsx(SelectInput, { items: shapeOptions, onSelect: handleSelect, onHighlight: handleHighlight })] }) })] }));
}
//# sourceMappingURL=title-shape-selector.js.map