import { useCallback, useState } from 'react'
import { WEBSOCKET_URL } from '../background/constants'
import { UserInfo } from '../components/jitsi/types'

const createWebSocketConnection = (userInfo: UserInfo) => {
  const webSocket = new WebSocket(WEBSOCKET_URL)
  console.log('[Rooms] createWebSocketConnection')
  webSocket.addEventListener('open', (_: Event) => webSocket.send(JSON.stringify(userInfo)))

  return webSocket
}

function useWebSocketConnection(userInfo: UserInfo) {
  console.log('[Rooms] useWebSocketConnection')

  const [webSocketConnection] = useState<WebSocket>(() => createWebSocketConnection(userInfo))

  const sendMessage = useCallback(
    (message: string) => {
      //if the socket's open, send a message:
      if (webSocketConnection.readyState === WebSocket.OPEN) {
        console.log('[Rooms] sending to ws', message)
        webSocketConnection.send(message)
      }
    },
    [webSocketConnection]
  )

  const onMessage = useCallback(
    (messageHandler: (messageHandler: string) => void) => {
      const wsMessageHandler = (ev: MessageEvent<any>) => {
        messageHandler(ev.data)
      }
      webSocketConnection.addEventListener('message', wsMessageHandler)
    },
    [webSocketConnection]
  )

  const disconnect = useCallback(webSocketConnection.close, [webSocketConnection])

  return { onMessage, sendMessage, disconnect }
}

export default useWebSocketConnection