const image = document.querySelector('#image') as HTMLImageElement
const input = document.querySelector('#input') as HTMLInputElement
const json = document.querySelector('#json') as HTMLInputElement

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

input.value = startUrl

let webSocketUrl = ''
let socket: WebSocket = null

input.onchange = () => {
  const url = input.value

  if (!url) {
    return
  }

  start(url)
}

const start = (url: string) => {
  if (socket) {
    socket.close()
  }

  socket = new WebSocket(url)

  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>`

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

start(startUrl)