import { store } from '../store'
import Whammy from './whammy'
import types from '../types'
import * as pix2wav from '../audio/pix2wav'

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

export function startSynthesizing(){
  synthesizing = true
}
export function stopSynthesizing(){
  synthesizing = false
}

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

export function stopRecording(){
  if (!recording) return
  recording = false
  store.dispatch({
    type: types.player.saving_video,
  })
  videoWriter.compile(false, function(blob){
    // console.log(blob)
    store.dispatch({
      type: types.player.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 ()
  let canvas = document.querySelector('.player canvas')
  if (! canvas) return console.error('no canvas for frame')
  img.onload = () => {
    img.onload = null
    last_frame = data.meta
    URL.revokeObjectURL(url)
    const ctx = canvas.getContext('2d-lodpi')
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    if (synthesizing) {
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      pix2wav.play({ imageData })
    }
    if (recording) {
      console.log('record frame')
      videoWriter.add(canvas)
      store.dispatch({
        type: types.player.add_record_frame,
      })
    }
    if (saving) {
      saving = false
      canvas.toBlob(blob => {
        store.dispatch({
          type: types.player.save_frame,
          blob: blob,
        })
      })
    }
    fps += 1
  }
  img.src = url
}

let previousValue, currentValue
export function toggleFPS(state) {
  currentValue = typeof state !== 'undefined' ? state : store.getState().live.playing
  if (previousValue !== currentValue) {
    if (currentValue) {
      startWatchingFPS()
    } else {
      stopWatchingFPS()
    }
  }
  previousValue = currentValue
}

let fpsInterval;

export function startWatchingFPS(){
  clearInterval(fpsInterval)
  fpsInterval = setInterval(() => {
    store.dispatch({
      type: types.player.set_fps,
      fps: fps,
    })
    store.dispatch({
      type: types.player.current_frame,
      meta: last_frame,
    })
    fps = 0
  }, 1000)
}
export function stopWatchingFPS(){
  clearInterval(fpsInterval)
}