import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import moment from 'moment'
import util from '../../../util'

import * as pix2wavActions from '../pix2wav.actions'
import * as pix2wavTasks from '../pix2wav.tasks'

import {
  Loading, Progress,
  Group, Param, FileUpload, TextInput, Button
} from '../../../common'

import * as wav2pixActions from '../../../audio/wav2pix'

import pix2wavModule from '../pix2wav.module'

class SpectrogramUpload extends Component {
  constructor(props){
    super(props)
    this.state = {
      file: null,
      name: "",
      frames: [],
    }
    const audioElement = document.createElement('audio')
    audioElement.addEventListener('loadedmetadata', () => {
      this.setState({ duration: audioElement.duration })
    })
    this.audioElement = audioElement
  }
  pickFile(file){
    let name = file.name.split('.')[0]
      .replace(/\s+/g, '_')
      .replace(/-/g, '_')
      .replace(/_+/g, '_')
    this.setState({ file, name })
    this.audioElement.src = URL.createObjectURL(file)
    console.log(file.size)
    if (file.size < 2 << 20) {
      console.log('booooooooo')
      this.props.wav2pix.renderFrames(file, {})
      .then(frames => {
        console.log(frames)
        this.setState({
          ...this.state, frames
        })
      })
    }
    console.log(file)
    // get info on the file... size, etc
  }
  buildZip(){
    const { file } = this.state

  }
  render(){
    // loading={pix2wav.loading}
    // progress={pix2wav.progress}
    // id={pix2wav.folder_id}
    // module={pix2wavModule}
    // data={pix2wav.data}
    // folder={folder}
    const { file, frames } = this.state
    return (
      <div className='row'>
        <div className='col spectrogramBuilder'>
          <Group title='Spectrogram Builder'>
            <p>
              {"Convert your sounds into spectrograms. "}
              {"Sound files can be WAV, MP3, AIFF, or FLAC. "}
              <b>2 minutes max.</b>
            </p>
            <FileUpload
              title='Choose a sound file'
              mime='image.*'
              onUpload={file => this.pickFile(file)}
            />
            <TextInput
              title='Dataset name'
              onChange={e => this.setState({ name: e.target.value })}
              value={this.state.name}
            />
            <Button
              onClick={() => this.buildZip()}
            >Build Zip</Button>
            <Progress />
            {file && this.renderMetadata(file)}
          </Group>
        </div>
        <div ref={(c) => { this.canvases = c }} id='pix2wav_canvases' />
      </div>
    )
  }
  renderMetadata(file){
    const { duration } = this.state
    const size = util.hush_size(file.size)
    return (
      <div className='fileMetadata'>
        {file.size > 2 << 20 &&
          <p>
            <i>Careful, your file is larger than 2 MB.</i>
          </p>}
        <Param title='Name'>{file.name}</Param>
        <Param title='Type'>{file.type}</Param>
        <Param title='Size'><span className={size[0]}>{size[1]}</span></Param>
        <Param title='Date'>{moment(file.lastModifiedDate).format("YYYY-MM-DD h:mm a")}</Param>
        <Param title='Duration'>{Math.floor(duration) + ' s.'}</Param>
        <br />
        <Param title='Status'>{this.props.pix2wav.status}</Param>
      </div>
    )
  }
  componentDidUpdate(){
    const canvases = (this.state.frames || []).map(c => {
      this.canvases.append(c.canvas)
    })
  }
}

const mapStateToProps = state => ({
  pix2wav: state.module.pix2wav,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: bindActionCreators(pix2wavActions, dispatch),
  remote: bindActionCreators(pix2wavTasks, dispatch),
  wav2pix: bindActionCreators(wav2pixActions, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(SpectrogramUpload)