import {GHButton} from "./Button";
import React, {FormEvent, FunctionComponent, RefObject} from "react";

interface Props{
    chatRef: RefObject<HTMLOListElement>;
    handleSend: (message: string) => void;
}

const Chat: FunctionComponent<Props> = ({chatRef, handleSend}) => {

    const handleChat = (form: FormEvent<HTMLFormElement>) => {
        form.preventDefault();
        const data = new FormData(form.currentTarget);
        const chatInput = data.get("chat-input") as string;
        if(!chatInput) return;
        handleSend(chatInput);
        form.currentTarget.reset();
    }

    return (
        <>
            <ol className={"chat__list"} ref={chatRef}/>
            <form className={"chat-form"} onSubmit={handleChat}>
                <input className={"chat-form__input"} type="text" placeholder={"Chat here..."} id={"chat-input"} name={"chat-input"}/>
                <GHButton type={"submit"}>Send</GHButton>
            </form>
        </>
    )
}

export default Chat;