import { FormEventHandler } from "react";
import useMeetingStarted from "../../hooks/useMeetingStarted";
import { useRoomName } from "../../hooks/useRoomName";
import "./MeetingNameInput.css";

function MeetingNameInput(props: {
  roomName: string; currentUser: string;
}) {

  const { roomName, updateRoomName, updateAndSubmitRoomName, submitRoomName } = useRoomName()
  const [_, setMeetingStarted] = useMeetingStarted()

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

  const onSubmit: FormEventHandler<HTMLFormElement> = (event) => {
    submitRoomName()
    setMeetingStarted(true)
    event.preventDefault();
  }

  console.log("[Rooms] MeetingName input comp");
  return (
    <div className="meeting-name-input">
      <h1>Greetings {props.currentUser}</h1>
      <form onSubmit={onSubmit}>
        <input
          placeholder="Roomname"
          type="text"
          value={roomName}
          onChange={onInput}
        />
        <button type="submit">Enter the adventure</button>
      </form>
    </div>
  );
}

export default MeetingNameInput;