import React, { Component } from 'react'
import { connect } from 'react-redux'
import extractPeaks from 'webaudio-peaks'

import actions from 'app/actions'
import { formatSize, timestampHMS, commatize } from 'app/utils'
import { Loader } from 'app/common'

class WaveUpload extends Component {
  state = {
    working: false,
    status: "",
    filename: "",
    duration: 0,
  }

  upload(e) {
    e.preventDefault()
    document.body.className = ''
    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
    let i
    let file
    for (i = 0; i < files.length; i++) {
      file = files[i]
      if (file && file.type.match('image.*')) break
    }
    if (!file) {
      console.log('No file specified')
      return
    }
    this.setState({ working: true, status: "Loading MP3...", filename: file.name, size: file.size, duration: 0 })
    const fileReader = new FileReader()
    fileReader.onload = event => {
      fileReader.onload = null
      this.processAudioFile(file, event.target.result)
    }
    fileReader.readAsArrayBuffer(file)
  }

  processAudioFile(audioFile, arrayBuffer) {
    this.setState({ working: true, status: "Extracting peaks..." })
    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
    audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {
      // buffer, samplesPerPixel, isMono, startOffset, endOffset, bitResolution
      this.setState({ duration: audioBuffer.duration })
      var peaks = extractPeaks(audioBuffer, audioBuffer.sampleRate / 5, true);
      console.log(peaks)
      const array = Array.from(peaks.data[0])
      const peaksBlob = new Blob([ JSON.stringify(array) ], {type: "application/json"});
      this.uploadAudioAndPeaks(audioFile, peaksBlob)
    })
  }

  uploadAudioAndPeaks(audioFile, peaksBlob) {
    const { episode } = this.props
    const updatedEpisode = { ...episode }
    this.setState({ status: "Removing old files..." })
    this.destroyTaggedFile('peaks')
    this.destroyTaggedFile('audio')
    .then(() => {
      return (
        this.uploadTaggedFile(
          peaksBlob,
          'peaks',
          'episode-' + this.props.episode.id + '-peaks.json',
          {}
        )
      )
    })
    .then(peaksResult => {
      updatedEpisode.settings.peaks = peaksResult
      return (
        this.uploadTaggedFile(
          audioFile,
          'audio',
          this.state.filename,
          {
            size: this.state.size,
            duration: this.state.duration,
          }
        )
      )
    })
    .then(audioResult => {
      updatedEpisode.settings.audio = audioResult
      return actions.episode.update(updatedEpisode)
    })
    .then(res => {
      this.setState({
        status: "Upload complete",
        working: false,
        filename: null,
        duration: null,
        size: null,
      })
      actions.align.loadPeaks(episode)
      actions.audio.loadEpisodeAudio(episode)
    })
  }

  uploadTaggedFile(file, tag, fn, meta) {
    return new Promise((resolve, reject) => {
      this.setState({ status: "Uploading " + tag + "..." })
      const uploadData = {
        tag,
        file,
        __file_filename: fn,
        episode_id: this.props.episode.id,
        username: this.props.currentUser.username,
      }
      // console.log(uploadData)
      return actions.upload.upload(uploadData).then(data => {
        // console.log(data)
        resolve({
          ...data.res,
          ...meta
        })
      })
    })
  }

  destroyTaggedFile(tag) {
    return new Promise((resolve, reject) => {
      if (!this.props.episode.settings[tag]) {
        return resolve();
      }
      actions.upload.destroy(this.props.episode.settings[tag])
      .then(() => {
        console.log('Destroy successful')
        resolve()
      })
      .catch(() => {
        console.log('Error deleting the image')
        reject()
      })
    })
  }

  render() {
    const { episode, peaks } = this.props
    // console.log(episode)
    return (
      <div className="sidebar-content wave-upload">
        {episode.settings.audio && (
          <div>
            <small>{episode.settings.audio.fn}</small>
            <small>{'Size: '}{formatSize(episode.settings.audio.size)}</small>
            <small>{'Duration: '}{timestampHMS(episode.settings.audio.duration)}</small>
            <small>{'Peaks: '}{commatize(peaks.length)}</small>
          </div>
        )}
        <div className="uploadButton">
          <button>
            <span>
              {episode.settings.audio
                ? "Upload a new audio file"
                : "Upload an audio file"
              }
            </span>
          </button>
          <input
            type="file"
            accept="audio/mp3"
            onChange={this.upload.bind(this)}
            required={this.props.required}
          />
        </div>
        <small>Upload an MP3, encoded 192kbit constant bitrate, 44.1kHz stereo</small>
        {this.state.status && (
          <div className='status'>
            {this.state.working && <Loader />}
            <div className='status-message'>{this.state.status}</div>
            {this.state.filename && <small>{this.state.filename}</small>}
            {this.state.size && <small>{'Size: '}{formatSize(this.state.size)}</small>}
            {!!this.state.duration && <small>{'Duration: '}{timestampHMS(this.state.duration)}</small>}
          </div>
        )}
      </div>
    )
  }
}

const mapStateToProps = state => ({
  peaks: state.align.peaks,
  currentUser: state.auth.user,
  project: state.site.project,
  episode: state.site.episode,
})

export default connect(mapStateToProps)(WaveUpload)