import { atom, useAtom } from 'jotai'
import { useCallback, useState } from 'react'

const roomNameAtom = atom(getRoomNameFromUrl())

function useRoomName() {
  const [roomName, setRoomName] = useAtom(roomNameAtom)

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

  const updateAndSubmitRoomName = useCallback(
    (newName: string) => {
      setRoomName(newName)
      setRoomNameInUrl(newName)
      setRoomNameInTitle(newName)
      console.log('[Rooms] update and submit room name', newName)
    },
    [setRoomName]
  )

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

  return { roomName, updateRoomName, updateAndSubmitRoomName, 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 }