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

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

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

import * as datasetActions from '../../../dataset/dataset.actions'
import * as wav2pixActions from '../../../audio/wav2pix'
import * as pix2wavPlayer from '../../../audio/pix2wav'

import pix2wavModule from '../pix2wav.module'

const date_stamp = () => moment().format("_YYYYMMDD_HHmm")

class SpectrogramUpload extends Component {
  constructor(props){
    super(props)
    this.state = {
      file: null,
      pcm: null,
      name: "",
      datasetName: "",
      frames: [],
      frame_start: 0,
      max: 1000,
      preview_count: 8*4,
      frame_step: wav2pixActions.FRAME_STEP,
    }
    const audioElement = document.createElement('audio')
    audioElement.addEventListener('loadedmetadata', () => {
      const duration = audioElement.duration
      const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step)
      this.setState({
        duration,
        max: Math.min(this.state.max, total_frame_count, 1000),
      })
    })
    this.audioElement = audioElement
  }
  pickFile(file){
    let name = file.name.split('.')[0]
      .replace(/\s+/g, '_')
      .replace(/-/g, '_')
      .replace(/_+/g, '_')
    this.setState({
      file,
      name: name + date_stamp(),
      datasetName: name,
      pcm: ''
    }, () => {
      this.rebuildFrames()
    })
    this.audioElement.src = URL.createObjectURL(file)
  }
  rebuildFrames(){
    const { file, pcm, frame_step, frame_start, preview_count } = this.state
    this.props.wav2pix.renderFrames(pcm || file, { frame_start, frame_step, max: preview_count })
    .then(data => {
      console.log('got frames', data.frames.length)
      this.setState({
        ...this.state,
        frames: data.frames,
        pcm: data.pcm,
      })
    })
  }
  buildZip(){
    const { pcm, file, max, frame_step, frame_start } = this.state
    this.props.wav2pix.buildZip(this.state.name, pcm || file, { frame_start, frame_step, max })
    .then(({ zip, filename, count }) => {
      this.props.datasetActions.uploadFile(
        this.props.module,
        this.props.folder,
        zip,
        filename,
        { count, max, frame_step, frame_size: wav2pixActions.FRAME_LENGTH / 44100 }
      )
    })
  }
  playFrame(i){
    return () => {
      const frame = this.state.frames[i]
      pix2wavPlayer.play(frame)
    }
  }
  render(){
    // loading={pix2wav.loading}
    // progress={pix2wav.progress}
    // id={pix2wav.folder_id}
    // module={pix2wavModule}
    // data={pix2wav.data}
    // folder={folder}
    const { file, frames, preview_count } = this.state
    const canvases = []
    for (let i = 0, _len = preview_count; i < _len; i++) {
      canvases.push(<canvas key={i} onClick={this.playFrame(i)} />)
    }
    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. "}
            </p>
            <FileUpload
              title='Choose a sound file'
              accept='audio/*'
              onUpload={file => this.pickFile(file)}
            />
            {file && this.renderMetadata(file)}
          </Group>
        </div>
        <div ref={(c) => { this.canvases = c }} className='thumbs' id='pix2wav_canvases'>
          {canvases}
        </div>
      </div>
    )
  }
  renderMetadata(file){
    const { duration, preview_count } = this.state
    const size = util.hush_size(file.size)
    const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step)
    const frame_size = Math.round(wav2pixActions.FRAME_LENGTH / 44100 * 1000) + ' ms.'
    const frame_step = Math.round(this.state.frame_step / 44100 * 1000) + ' ms.'
    return (
      <div className='fileMetadata'>
        <Group title='Metadata'>
          <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='Frames'>{total_frame_count}</Param>
          <Param title='Frame Size'>{frame_size}</Param>
          <Param title='Frame Step'>{frame_step}</Param>
          <Param title='FFT Size'>{wav2pixActions.spectrum.fft_size}</Param>
          <br />
          <Param title='Status'>{this.props.pix2wav.status}</Param>
          <br />
        </Group>
        <Group title='Data settings'>
          <TextInput
            title='Dataset name'
            onChange={e => this.setState({ name: e.target.value })}
            value={this.state.name}
          />
          <Slider
            name='Starting Frame'
            min={0} max={1} type='float'
            value={this.state.frame_start}
            defaultValue={0}
            onChange={frame_start => {
              this.setState({
                frame_start
              }, () => {
                this.rebuildFrames()
              })
            }}
          />
          <Slider
            name='No. Frames'
            min={10} max={Math.min(total_frame_count, 1000)} type='int'
            value={this.state.max}
            defaultValue={Math.min(total_frame_count, 300)}
            onChange={max => this.setState({ max })}
          />
          <Slider
            name='Frame step'
            min={10} max={20000} type='int'
            value={this.state.frame_step}
            defaultValue={wav2pixActions.FRAME_STEP}
            onChange={frame_step => {
              const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / frame_step)
              this.setState({
                name: this.state.datasetName + '_step_' + frame_step + date_stamp(),
                frame_step,
                max: Math.min(this.state.max, total_frame_count)
              }, () => {
                this.rebuildFrames()
              })
            }}
          />
          <Button
            onClick={() => this.buildZip()}
          >Upload Frames</Button>
        </Group>
        <Progress />
      </div>
    )
  }
  componentDidUpdate(){
    (this.state.frames || []).map((frame, i) => {
      const canvas = this.canvases.children[i]
      const ctx = canvas.getContext('2d-lodpi')
      canvas.width = frame.canvas.width
      canvas.height = frame.canvas.height
      ctx.drawImage(frame.canvas, 0, 0)
    })
  }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(SpectrogramUpload)