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

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

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

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

  return (
    <MeetingNameInput
      roomName={roomName}
      setName={updateRoomName}
      submit={startMeeting}
      currentUser="unknown traveller"
    />
  );
}

export default Meeting;