import { store } from './store'

let socket = io.connect('/client')
let got_frame = false

// SOCKET ACTIONS

socket.on('res', (data) => {
  console.log(data.cmd)
  switch (data.cmd) {
    case 'get_last_frame':
      if (data.res !== 'working') {
        socket.emit('cmd', {
          cmd: 'get_last_frame',
        })
      }
      break
    case 'get_params':
      store.dispatch({
        type: 'LOAD_PARAMS',
        opt: data.res,
      })
      break
    case 'list_checkpoints':
      store.dispatch({
        type: 'LIST_CHECKPOINTS',
        opt: data.res,
      })
      break
    case 'list_videos':
      store.dispatch({
        type: 'LIST_VIDEOS',
        opt: data.res,
      })
      break
    default:
      break
  }
  console.log(data)
})

socket.on('frame', (data) => {
  got_frame = true
  const blob = new Blob([data.frame], { type: 'image/jpg' })
  const url = URL.createObjectURL(blob)
  const img = new Image ()
  img.onload = function() {
    URL.revokeObjectURL(url)
    const player = document.querySelector('.player')
    player.innerHTML = ''
    player.appendChild(img)
  }
  img.src = url
})

setTimeout(() => {
  if (!got_frame) {
    // socket.emit('cmd', {
    //   cmd: 'get_last_frame',
    // })
  }
}, 500)

export function list_checkpoints() {
  socket.emit('cmd', {
    cmd: 'list_checkpoints',
  })
}
export function list_videos() {
  socket.emit('cmd', {
    cmd: 'list_videos',
  })
}
export function get_params() {
  socket.emit('cmd', {
    cmd: 'get_params',
  })
}
export function set_param(key, value) {
  socket.emit('cmd', {
    cmd: 'set_param',
    payload: {
      'key': key,
      'value': value,
    }
  })
}
export { socket }