import Tone from 'tone'
import JSZip from 'jszip'
import { sprintf } from 'sprintf-js'
import FileSaver from 'file-saver'

import draw from './draw'
import keys from './lib/keys'
import mouse from './lib/mouse'
import output from './lib/output'
import spectrum from './lib/spectrum'

import {
  requestAudioContext,
  lerp, clamp, mod,
} from './lib/util'

let selfDrag = false
let buffer
let players = []
let gallery
let sr = 44100
let last_i = 0
let _r = 8, _i = 8
function init(){
  requestAudioContext(ready)
  document.body.addEventListener('dragover', dragover)
  document.body.addEventListener('dragstart', dragstart)
  document.body.addEventListener('drop', drop)
  document.querySelector("#upload").addEventListener('change', handleFileSelect)
  // draw.onFrame(() => {})
  draw.resize(256, 256)

  gallery = document.querySelector('#gallery')
  mouse.register({
    move: (x, y) => {
    }
  })
  keys.listen((z) => {
    // console.log(z)
    play(mod(z, players.length))
  })
}
function ready(){
}
function dragover (e) {
  e.preventDefault()
}
function dragstart (e) {
  selfDrag = true
}
function drop (e) {
  e.stopPropagation()
  e.preventDefault()

  if (e.dataTransfer && ! selfDrag) {
    if (e.dataTransfer.files.length) {
      handleFileSelect(e)
    }
  }
  else {
    handleFileSelect(e)
  }
  selfDrag = false
}
let files, file_index = 0;
function handleFileSelect(e){
  files = e.dataTransfer ? e.dataTransfer.files : e.target.files
  loadNext()
}
function loadNext(){
  var file = files[file_index++]
  if (! file) return
  load(file)
}
function load(file){
  players = []
  buffer = new Tone.Buffer(URL.createObjectURL(file), loadBuffer, (err) => console.error('err', err))
}
function loadBuffer(){
  console.log('loaded buffer', buffer)
  const pcm = buffer._buffer.getChannelData(0)
  sr = buffer._buffer.sampleRate
  if (! pcm) return

  const FRAME_LENGTH = 126 * 255
  const FRAME_OFFSET = FRAME_LENGTH / 4

  var zip = new JSZip()

  var zip_folder = zip.folder("images");

  for (var offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH; offset < _len; offset += FRAME_OFFSET, count += 1) {
    if ((count % 100) === 0) console.log(count)
    // console.log('generating', count, offset)
    // let player = render(pcm.slice(offset, offset+FRAME_LENGTH), count, zip_folder)
    render(pcm.slice(offset, offset+FRAME_LENGTH), count, zip_folder)
    // register(player, count)
    // if (count > 20) break
  }

  console.log('done exporting')
  zip.generateAsync({type:"blob"}).then(function(content) {
    console.log('saving zip')
    FileSaver.saveAs(content, "img2pix.zip")
    setTimeout(loadNext, 1000)
  })
  // play(0)
}
function render(pcm, count, zip){
  const fft = spectrum.toSpectrum(pcm, sr)
  // console.log('render', fft)
  // const pcm_rev = pcm.slice().reverse()
  // const spec_rev = spectrum.toSpectrum(pcm_rev, spec.sr)
  draw.clear()
  const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, _r, _i)
  const dataURL = canvas.toDataURL("image/png")
  if (zip) {
    const fn = sprintf('frame_%05d.png', count)
    zip.file(fn, dataURL.split(',')[1], {base64: true})
  }
  return { fft, canvas, imageData }
}
function play(i) {
  // console.log('play', i)
  last_i = i
  let player = players[clamp(i, 0, players.length)]
  // const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, 1, 1)
  // console.log(_r, _i)
  // const { canvas, imageData } = draw.raw_spectrum(player.fft, 0, 256, 0, 256, _r, _i)
  const new_fft = spectrum.fromImageData(player.imageData, 44100, _r, _i)
  // gallery.innerHTML = ''

  // console.log(player.fft.data, new_fft.data)
  const buf = spectrum.fromSpectrum(new_fft)
  const _p = new Tone.Player(buf)
  _p.connect(output)
  _p.start(Tone.now())
  redraw(new_fft)
}
function redraw(new_fft){
  const { canvas, imageData } = draw.raw_spectrum(new_fft, 0, 256, 0, 256, _r, _i)
}
function register(player, i){
  // console.log('register', player)
  players.push(player)
  player.canvas.addEventListener('click', () => {
    play(i)
  })
  if (i < 20) {
    gallery.appendChild(player.canvas)  
  }
}
init()