import { useCallback, useState } from "react";
import { ConferenceData } from "../../background/jitsi/eventListeners";
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 { roomName, updateRoomName, submitRoomName } = useRoomName();
  const [meetingStarted, setMeetingStarted] = useState(false);

  const startMeeting = useCallback(() => {
    submitRoomName();
    setMeetingStarted(true);
  }, [submitRoomName, setMeetingStarted]);

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

  return (
    <MeetingNameInput
      roomName={roomName}
      setName={updateRoomName}
      submit={startMeeting}
      currentUser={userInfo.displayName}
    />
  );
}

export default Meeting;