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 { getNanocoderShape } from '../config/preferences.js';
import { useResponsiveTerminal } from '../hooks/useTerminalWidth.js';
import { useTheme } from '../hooks/useTheme.js';
const DEFAULT_SHAPE = 'tiny';
export default function NanocoderShapeSelector({ onComplete, onCancel, }) {
    const { boxWidth, isNarrow } = useResponsiveTerminal();
    const { colors } = useTheme();
    // Get current shape from preferences or use default
    const savedShape = getNanocoderShape();
    const initialShape = savedShape ?? DEFAULT_SHAPE;
    // Store original shape for restore on cancel
    const [originalShape] = useState(initialShape);
    // Current preview shape
    const [previewShape, setPreviewShape] = useState(initialShape);
    // Auto-focus to ensure keyboard navigation works
    useFocus({ autoFocus: true, id: 'nanocoder-shape-selector' });
    // Handle escape key to cancel
    useInput((_, key) => {
        if (key.escape) {
            onCancel();
        }
    });
    // Create nanocoder shape options with descriptions
    const shapeOptions = [
        { label: 'Tiny (default) - Compact, minimal style', value: 'tiny' },
        { label: 'Block - Bold, blocky letters', value: 'block' },
        { label: 'Simple - Clean, straightforward', value: 'simple' },
        { label: 'Simple Block - Simple with block style', value: 'simpleBlock' },
        { label: 'Slick - Sleek, modern look', value: 'slick' },
        { label: 'Grid - Grid-based pattern', value: 'grid' },
        { label: 'Pallet - Artistic palette style', value: 'pallet' },
        { label: 'Shade - Shaded 3D effect', value: 'shade' },
        { label: '3D - Full 3D perspective', value: '3d' },
        { label: 'Simple 3D - Simplified 3D look', value: 'simple3d' },
        { label: 'Chrome - Metallic chrome finish', value: 'chrome' },
        { label: 'Huge - Extra large display', value: 'huge' },
    ];
    // 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 handleSelect = (item) => {
        onComplete(item.value);
    };
    // Handle shape preview during navigation
    const handleHighlight = (item) => {
        setPreviewShape(item.value);
    };
    // Show "NC" on narrow terminals, "Nanocoder" on wider ones
    const displayText = isNarrow ? 'NC' : 'Nanocoder';
    return (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Gradient, { colors: [colors.primary, colors.tool], children: _jsx(BigText, { text: displayText, font: previewShape }) }) }), _jsxs(TitledBoxWithPreferences, { title: "Choose your Nanocoder branding style!", 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: "Select a font style for the Nanocoder welcome banner:" }) }), _jsxs(Box, { paddingBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: colors.secondary, children: "1. Use arrow keys to navigate through the font options." }), _jsx(Text, { color: colors.secondary, children: "2. Watch the preview above change as you navigate." }), _jsx(Text, { color: colors.secondary, children: "3. Press Enter to select your preferred style." }), _jsx(Text, { color: colors.secondary, children: "4. Press Esc to cancel and keep your current style." })] })] }), _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 branding style" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.secondary, children: "\u2191/\u2193 Navigate \u2022 Enter Select \u2022 Esc Cancel" }) }), _jsx(SelectInput, { items: shapeOptions, initialIndex: initialIndex, onSelect: handleSelect, onHighlight: handleHighlight })] }) })] }));
}
//# sourceMappingURL=nanocoder-shape-selector.js.map