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

import * as samplernnActions from '../samplernn.actions'
import * as samplernnTasks from '../samplernn.tasks'
import * as audioPlayerActions from '../../../common/audioPlayer/audioPlayer.actions'

import { Loading, CurrentTask, FileList, FileRow } from '../../../common'

import DatasetForm from '../../../dataset/dataset.form'
import UploadStatus from '../../../dataset/upload.status'

import DatasetComponent from '../../../dataset/dataset.component'

import samplernnModule from '../samplernn.module'

class SampleRNNShow extends Component {
  constructor(props){
    super(props)
    this.datasetActions = this.datasetActions.bind(this)
  }
  componentWillMount(){
    const id = this.props.match.params.id || localStorage.getItem('samplernn.last_id')
    console.log('load dataset:', id)
    const { match, samplernn, actions } = this.props
    if (id === 'new') return
    if (id) {
      if (parseInt(id)) localStorage.setItem('samplernn.last_id', id)
      if (! samplernn.folder || samplernn.folder.id !== id) {
        // console.log('looooooooooad', id)
        actions.load_directories(id)
      }
    } else {
      this.props.history.push('/samplernn/new/')
    }
  }
  render(){
    const { samplernn, runner, match, history } = this.props
    const { folderLookup } = (samplernn.data || {})
    // console.log(runner)
    const folder = (folderLookup || {})[samplernn.folder_id] || {}
    return (
      <div className='app samplernn'>
        <div className='heading'>
          <h1>{folder ? folder.name : <Loading />}</h1>
        </div>
        <div className='row'>
        {folder && folder.name && folder.name !== 'unsorted' &&
          <DatasetForm
            title='Add Files'
            module={samplernnModule}
            folder={folder}
            canUpload canAddURL
          />
        }
          <div>
            <UploadStatus />
            <CurrentTask processor='gpu' />
          </div>
        </div>
        <DatasetComponent
          loading={samplernn.loading}
          progress={samplernn.progress}
          id={samplernn.folder_id}
          module={samplernnModule}
          data={samplernn.data}
          folder={folder}
          history={history}
          onPickFile={(file, e) => {
            e.preventDefault()
            e.stopPropagation()
            // console.log('picked a file', file)
            this.handlePick(file)
          }}
          datasetActions={this.datasetActions}
        />
      </div>
    )
  }
  datasetActions(dataset, isFetching=false, isProcessing=false){
    const { samplernn, remote } = this.props
    const input = samplernn.data.fileLookup[dataset.input[0]]
    if (! input) return null
    if (input.name && input.name.match(/(gif|jpe?g|png)$/i)) return null
    return (
      <div>
        <div class={'actions'}>
          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 1)}>train</span>
          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 2)}>2x</span>
          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 4)}>4x</span>
          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 6)}>6x</span>
          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 18)}>18x</span>
        </div>
        <div class={'actions'}>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 5, 12)}>generate</span>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 0.5, 120)}>/2</span>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 0.25, 240)}>/4</span>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 0.125, 480)}>/8</span>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 0.0625, 960)}>/16</span>
        </div>
        <div class={'actions'}>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 2, 30)}>2s</span>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 10, 6)}>10s</span>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 15, 4)}>15s</span>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 30, 2)}>30s</span>
          <span class='link' onClick={() => remote.generate_task(dataset, samplernn.folder_id, 60, 1)}>1m</span>
        </div>
        {dataset.isBuilt
        ? <div class='subtext'>
            {'fetched '}
            <span class='link' onClick={() => remote.clear_cache_task(dataset)}>x</span>
          </div>
        : isFetching
        ? <div class='subtext'>
            {'fetching'}
          </div>
        : <div class='subtext'>
            <span class='link' onClick={() => remote.fetch_task(input.url, samplernn.folder_id, input.id, dataset.name)}>fetch</span>
          </div>
        }
      </div>
    )
  }
  handlePick(file){
    // console.log(file)
    this.props.audioPlayer.play(file)
  }
}

const mapStateToProps = state => ({
  samplernn: state.module.samplernn,
  runner: state.system.runner,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: bindActionCreators(samplernnActions, dispatch),
  remote: bindActionCreators(samplernnTasks, dispatch),
  audioPlayer: bindActionCreators(audioPlayerActions, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNShow)