import React, { useState, useRef } from 'react';
import styles from './MessageInput.module.scss';

type Props = {
    onSend: (text: string) => void | Promise<void>;
    disabled?: boolean;
};

export function MessageInput({
    onSend,
    disabled = false
}: Props) {
    const [value, setValue] = useState('');
    const typingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
    const isTypingRef = useRef(false);


    const handleChange = (next: string) => {
        setValue(next);

    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        const text = value.trim();
        if (!text || disabled) return;


        onSend(text);
        setValue(''); // clear input
    };

    const isDisabled = disabled || !value.trim();
    return (
        <form onSubmit={handleSubmit} className={styles.messageInputForm}>
            <input
                value={value}
                type="text"
                onChange={(e) => handleChange(e.target.value)}
                placeholder="Type…"
            />
            <button type="submit" disabled={isDisabled}>
                Send
            </button>
        </form>
    );
}