import { useCallback, useState } from "react";

function useRoomName() {
  const [roomName, setRoomName] = useState(getRoomNameFromUrl());

  const updateRoomName = useCallback(
    (newName: string) => {
      setRoomName(newName);
      console.log("[Rooms] update room name", newName);
    },
    [setRoomName]
  );

  const submitRoomName = useCallback(
    () => {
      setRoomNameInUrl(roomName);
      setRoomNameInTitle(roomName);
    },
    [roomName]
  );

  return { roomName, updateRoomName, submitRoomName };
}

function getRoomNameFromUrl(): string {
  const pathName = location.pathname;
  const roomName = pathName
    .substring(pathName.lastIndexOf("/"), pathName.length)
    .replace("/", "");
  console.log("[Rooms] Got roomName from url", roomName);
  setRoomNameInTitle(roomName);
  return roomName;
}

function setRoomNameInUrl(roomName: string) {
  history.pushState(history.state, "_", roomName);
}

function setRoomNameInTitle(roomName: string) {
  if (!!roomName) {
    document.title = roomName;
  }
}

export { useRoomName };