import { useCallback, useState } from 'react'
import { ConferenceData } from '../../background/jitsi/eventListeners'
import useMeetingStarted from '../../hooks/useMeetingStarted'
import { useRoomName } from '../../hooks/useRoomName'
import JitsiEntrypoint from '../jitsi/JitsiEntrypoint'
import { UserInfo } from '../jitsi/types'
import MeetingNameInput from './MeetingNameInput'

interface Props {
  conferenceData: ConferenceData | undefined
  setConferenceData: (newData: ConferenceData) => void
  userInfo: UserInfo
}

function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
  const [meetingStarted, setMeetingStarted] = useMeetingStarted()
  const { roomName } = useRoomName()

  if (meetingStarted) {
    return (
      <JitsiEntrypoint
        conferenceData={conferenceData}
        roomName={roomName}
        userInfo={userInfo}
        setConferenceData={setConferenceData}
      />
    )
  }

  return <MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
}

export default Meeting