import React, { useState, useEffect } from 'react';

const CommandInput = ({ value, onChange, /* onSendMessage удален из пропсов */ }) => { // onSendMessage больше не передается как проп
    const [suggestions, setSuggestions] = useState([]);
    const commands = ['/help', '/imagine', '/analyze', '/subtitles_meet', '/subtitles_teams', '/summarize', '/chat'];

    useEffect(() => {
        if (value.startsWith('/')) {
            const filteredSuggestions = commands.filter(command =>
                command.startsWith(value.toLowerCase())
            );
            setSuggestions(filteredSuggestions);
        } else {
            setSuggestions([]);
        }
    }, [value]);

    const handleSuggestionClick = (suggestion) => {
        onChange({ target: { value: suggestion } });
        setSuggestions([]);
    };

    const handleKeyDown = (event) => {
        if (event.key === 'Enter') {
            if (suggestions.length > 0) {
                // Если есть предложения, выбираем первое (или другое, если у вас есть логика выделения)
                handleSuggestionClick(suggestions[0]);
                // Предотвращаем стандартное поведение (отправку формы), так как мы обработали Enter
                event.preventDefault(); 
            }
            // Если предложений нет, то Enter должен просто вызвать стандартную отправку формы.
            // Ничего дополнительно делать здесь не нужно, т.к. родительская форма обработает submit.
        }
    };

    return (
        <div className="command-input">
            <input
                type="text"
                value={value}
                onChange={onChange}
                onKeyDown={handleKeyDown}
            />
            {suggestions.length > 0 && (
                <ul className="suggestions">
                    {suggestions.map((suggestion, index) => (
                        <li key={index} onClick={() => handleSuggestionClick(suggestion)}>
                            {suggestion}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default CommandInput;