import { store } from '../store'
import Whammy from './whammy'

let fps = 0, last_frame
let recording = false, saving = false
let videoWriter

export function startRecording(){
  videoWriter = new Whammy.Video(10)
  recording = true
  store.dispatch({
    type: 'START_RECORDING',
  })
}

export function stopRecording(){
  if (!recording) return
  recording = false
  store.dispatch({
    type: 'SAVING_VIDEO',
  })
  videoWriter.compile(false, function(blob){
    console.log(blob)
    store.dispatch({
      type: 'SAVE_VIDEO',
      blob: blob,
    })
  })
}

export function saveFrame(){
  saving = true
}

export function onFrame (data) {
  const blob = new Blob([data.frame], { type: 'image/jpg' })
  const url = URL.createObjectURL(blob)
  const img = new Image ()
  img.onload = function() {
    last_frame = data.meta
    URL.revokeObjectURL(url)
    const canvas = document.querySelector('.player canvas')
    const ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    if (recording) {
      console.log('record frame')
      videoWriter.add(canvas)
      store.dispatch({
        type: 'ADD_RECORD_FRAME',
      })
    }
    if (saving) {
      saving = false
      canvas.toBlob(function(blob) {
        store.dispatch({
          type: 'SAVE_FRAME',
          blob: blob,
        })
      })
    }
    fps += 1
  }
  img.src = url
}

setInterval(() => {
  store.dispatch({
    type: 'SET_FPS',
    fps: fps,
  })
  store.dispatch({
    type: 'CURRENT_FRAME',
    meta: last_frame,
  })
  fps = 0
}, 1000)