import React, { Component } from 'react'
// import { Link } from 'react-router-dom'
import { connect } from 'react-redux'

// import actions from 'app/actions'

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

  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" })
    const fileReader = new FileReader()
    fileReader.onload = fileReaderEvent => {
      fileReader.onload = null
      this.processAudioFile({ file })
    }
    fileReader.readAsDataURL(file)
  }

  processAudioFile(file) {
    var context = new (window.AudioContext);
    source = context.createBufferSource();
  }

  render() {
    const { episode, peaks } = this.props
    return (
      <div className="sidebar-content wave-upload">
        {peaks.length && (
          <div>
            Peaks: {peaks.length}
          </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>
        <div>
          {this.state.status}
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(WaveUpload)