import { useCallback, useState } from "react";
import { useRoomName } from "../../hooks/useRoomName";
import JitsiEntrypoint from "../jitsi/JitsiEntrypoint";
import { UserInfo } from "../jitsi/types";
import MeetingNameInput from "./MeetingNameInput";

function Meeting() {
  const { roomName, updateRoomName, submitRoomName } = useRoomName();
  const [meetingStarted, setMeetingStarted] = useState(false);

  const userInfo: UserInfo = { displayName: "unknown traveller", email: "" }


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

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

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

export default Meeting;