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;