import { useState } from "react";
import { FormEventHandler } from "react";
import useAllChat from "../../hooks/useAllChat";
import "./Chat.css"

interface Props {
  sendMessage: Function
}



function Chat({ sendMessage }: Props) {

  const [chatInput, setChatInput] = useState("")

  const { chatMesages } = useAllChat()

  const onInput: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    setChatInput(event.target.value);
    event.preventDefault();
  };

  const onSubmit: FormEventHandler<HTMLFormElement> = (event) => {
    event.preventDefault();
    sendMessage(JSON.stringify({ content: chatInput }));
    setChatInput("")
  }

  return (
    <div className="">
      {chatMesages.map(message => (
        <div className="chat-bubble"> <span>{message.sender.name}: </span> {message.content} </div>
      ))

      }
      <form onSubmit={onSubmit}>
        <input
          className="chat-input"
          placeholder="Say something funny :D"
          type="text"
          value={chatInput}
          onChange={onInput}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );


}


export default Chat