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