import React, { useMemo } from "react";
import { Box, Text } from "ink";
import { useTheme } from "../context/theme-context.js";
// Memoized ChatInput to reduce re-renders and prevent flickering
export const ChatInput = React.memo(function ChatInput({ input, cursorPosition, isProcessing, isStreaming, mode = 'code', }) {
    const { colors } = useTheme();
    // Mode icons and colors for prompt
    const modePromptIcons = {
        plan: '📋',
        code: '❯',
        ask: '❓',
    };
    const modePromptColors = {
        plan: colors.info,
        code: colors.primary,
        ask: colors.secondary,
    };
    const promptIcon = modePromptIcons[mode] || '❯';
    const promptColor = modePromptColors[mode] || colors.primary;
    // Memoize cursor calculations to avoid recomputing on every render
    const cursorData = useMemo(() => {
        const lines = input.split("\n");
        const isMultiline = lines.length > 1;
        const beforeCursor = input.slice(0, cursorPosition);
        // Calculate cursor position across lines
        let currentLineIndex = 0;
        let currentCharIndex = 0;
        let totalChars = 0;
        for (let i = 0; i < lines.length; i++) {
            if (totalChars + lines[i].length >= cursorPosition) {
                currentLineIndex = i;
                currentCharIndex = cursorPosition - totalChars;
                break;
            }
            totalChars += lines[i].length + 1; // +1 for newline
        }
        return { lines, isMultiline, beforeCursor, currentLineIndex, currentCharIndex };
    }, [input, cursorPosition]);
    const { lines, isMultiline, beforeCursor, currentLineIndex, currentCharIndex } = cursorData;
    const showCursor = !isProcessing && !isStreaming;
    const borderColor = isProcessing || isStreaming ? colors.borderBusy : colors.borderActive;
    // Display placeholder when input is empty
    const placeholderText = mode === 'plan'
        ? "Describe the task you want to plan..."
        : mode === 'ask'
            ? "Ask a question..."
            : "Ask me anything...";
    const isPlaceholder = !input;
    if (isMultiline) {
        return (React.createElement(Box, { borderStyle: "round", borderColor: borderColor, paddingY: 0, marginTop: 1 }, lines.map((line, index) => {
            const isCurrentLine = index === currentLineIndex;
            const promptChar = index === 0 ? promptIcon : "│";
            if (isCurrentLine) {
                const beforeCursorInLine = line.slice(0, currentCharIndex);
                const cursorChar = line.slice(currentCharIndex, currentCharIndex + 1) || " ";
                const afterCursorInLine = line.slice(currentCharIndex + 1);
                return (React.createElement(Box, { key: index },
                    React.createElement(Text, { color: promptColor },
                        promptChar,
                        " "),
                    React.createElement(Text, null,
                        beforeCursorInLine,
                        showCursor && (React.createElement(Text, { backgroundColor: "white", color: "black" }, cursorChar)),
                        !showCursor && cursorChar !== " " && cursorChar,
                        afterCursorInLine)));
            }
            else {
                return (React.createElement(Box, { key: index },
                    React.createElement(Text, { color: promptColor },
                        promptChar,
                        " "),
                    React.createElement(Text, null, line)));
            }
        })));
    }
    // Single line input box
    const cursorChar = input.slice(cursorPosition, cursorPosition + 1) || " ";
    const afterCursorText = input.slice(cursorPosition + 1);
    return (React.createElement(Box, { borderStyle: "round", borderColor: borderColor, paddingX: 1, paddingY: 0, marginTop: 1 },
        React.createElement(Box, null,
            React.createElement(Text, { color: promptColor },
                promptIcon,
                " "),
            isPlaceholder ? (React.createElement(React.Fragment, null,
                React.createElement(Text, { color: colors.textMuted, dimColor: true }, placeholderText),
                showCursor && (React.createElement(Text, { backgroundColor: "white", color: "black" }, " ")))) : (React.createElement(Text, null,
                beforeCursor,
                showCursor && (React.createElement(Text, { backgroundColor: "white", color: "black" }, cursorChar)),
                !showCursor && cursorChar !== " " && cursorChar,
                afterCursorText)))));
});
//# sourceMappingURL=ChatInput.js.map