import { rtcLiveSource2 } from './cc'
import { Unlisten } from './types'
import { wrapVideoSource } from './wrapper'

const video = document.querySelector('#video') as HTMLVideoElement
const canvas = document.querySelector('#canvas') as HTMLCanvasElement
const urlInput = document.querySelector('#url') as HTMLInputElement
const streamIdInput = document.querySelector('#streamId') as HTMLInputElement
const json = document.querySelector('#json') as HTMLInputElement

let startUrl = 'ws://88.205.25.78:8080/ms99iev7ptplft.json?meta=3'

let url: string = ''
let streamId: string = ''

urlInput.value = startUrl

urlInput.onchange = () => {
  url = urlInput.value

  restart()
}

urlInput.onchange = () => {
  streamId = streamIdInput.value

  restart()
}

let unlisten: Unlisten

const restart = () => {
  if (streamId && streamId) {
    start(streamId, streamId)
  }
}

const start = (url: string, streamId: string) => {
  if (unlisten) {
    unlisten()

    unlisten = undefined
  }

  const videoSource = wrapVideoSource(video)

  unlisten = rtcLiveSource2(
    url,
    streamId,
    videoSource,
    { video, canvas },
    {
      onOpen() {},
      onError(err) {},
      onFrame(frame, timestamp) {},
      onMetadata(metadata, timestamp) {},
    },
    { debug: true }
  )

  socket.addEventListener('message', (event: MessageEvent) => {
    const { data: data_ } = event

    const obj = JSON.parse(data_)

    const { time, track, trackid, type, data } = obj

    if (data) {
      const parsedData = typeof data === 'string' ? JSON.parse(data) : data

      const { metadata } = parsedData

      if (metadata) {
        const parsedMetadata = JSON.parse(metadata)

        const { detected_objects, mjpg } = parsedMetadata

        json.innerHTML = `<pre>${JSON.stringify(
          { time, detected_objects },
          null,
          2
        )}</pre>`

        video.src = `data:image/jpg;base64,${mjpg}`
      }
    }
  })
}

restart()

export default null