import { useRef, useEffect } from 'preact/hooks';

export default function ChatInput({ onSend, disabled }) {
    const textareaRef = useRef(null);

    useEffect(() => {
        if (!disabled) textareaRef.current?.focus();
    }, [disabled]);

    function handleSend() {
        const text = textareaRef.current?.value.trim();
        if (!text || disabled) return;
        onSend(text);
        textareaRef.current.value = '';
        textareaRef.current.style.height = '38px';
    }

    function handleKeyDown(e) {
        if (e.key === 'Enter' && !e.shiftKey && !disabled) {
            e.preventDefault();
            handleSend();
        }
    }

    function handleInput() {
        const el = textareaRef.current;
        el.style.height = '38px';
        if (el.scrollHeight > 38) {
            el.style.height = el.scrollHeight + 'px';
        }
    }

    return (
        <div class="chat-input">
            <div class="input-container">
                <textarea
                    ref={textareaRef}
                    placeholder="Type your message..."
                    onKeyDown={handleKeyDown}
                    onInput={handleInput}
                    disabled={disabled}
                />
            </div>
            <button
                class="send-button"
                onClick={handleSend}
                disabled={disabled}
                aria-label="Send message"
            >
                &#x27A4;
            </button>
        </div>
    );
}