import { ConferenceData } from '../../background/jitsi/eventListeners'
import { UsersData } from '../../background/types/roomData'
import useMeetingStarted from '../../hooks/useMeetingStarted'
import { useRoomName } from '../../hooks/useRoomName'
import JitsiEntrypoint from '../jitsi/JitsiEntrypoint'
import { UserInfo } from '../jitsi/types'
import MeetingNameInput from './MeetingNameInput'
import './Meeting.css'

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

function Meeting(props: Props) {
  const { conferenceData, setConferenceData, userInfo, usersData } = props
  console.log("[Rooms] meeting usersData", props)
  const [meetingStarted] = useMeetingStarted()
  const { roomName } = useRoomName()
  const [_, setMeetingStarted] = useMeetingStarted()
  const { updateAndSubmitRoomName: updateAndSubmitRoomName } = useRoomName()

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

  return (
    <div>
      <MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
      <div className="meeting-quickjoin">
        {usersData?.roomsData.map((roomData) => {
          return (
            <>
              <h3>
                <a
                  href="#"
                  onClick={() => {
                    updateAndSubmitRoomName(roomData.roomName)
                    setMeetingStarted(true)
                  }}
                >
                  {roomData.roomName}
                </a>
              </h3>
              {roomData.participants.map((participant) => (
                <div key={participant.jid}> {participant.displayName} </div>
              ))}
            </>
          )
        })}
      </div>
    </div>)
}

export default Meeting