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

import * as samplernnActions from './samplernn.actions'

import Select from '../../common/select.component'
import TextInput from '../../common/textInput.component'
import Button from '../../common/button.component'

import SampleRNNDatasets from './samplernn.datasets'

const samplernnModule = {
  name: 'samplernn',
  datatype: 'audio',
}

class SampleRNNImport extends Component {
  constructor(){
    super()
    this.state = {
      folder: 1,
      import_action: 'Hotlink',
      url_base: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4279/',
      selected: {},
    }
  }
  render(){
    let datasets = [];
    if (this.props.samplernn.data) {
      datasets = (this.props.samplernn.data.folders || []).map(folder => {
        return [folder.name, folder.id]
      })
    }
    return (
      <div className='app top'>
        <div class='heading'>
          <h1>Import</h1>
        </div>
        <div class='params form row datasets'>
          <div class='row dataset'>
            <div class='col'>
            </div>
            <div class='col'>
            </div>
            <div class='col'>
            </div>
            <div class='col'>
              <h2>Import to dataset</h2>
              <Select
                title='Destination dataset'
                options={datasets}
                name='folder'
                opt={this.state}
                onChange={(name, value) => this.setState({ folder: value })}
              />
              <Select
                title='Import action'
                options={['Hotlink', 'Upload']}
                name='import_action'
                opt={this.state}
                onChange={(name, value) => this.setState({ import_action: value })}
              />
              <TextInput
                title="Remote URL base"
                value={this.state.url_base}
                placeholder="http://"
                onSave={(value) => this.setState({ url_base: value })}
              />
              <Button
                title=""
                onClick={() => this.doImport()}
              >
                Import
              </Button>
            </div>
          </div>
        </div>
        <SampleRNNDatasets
          id="unsorted"
          history={this.props.history}
          onPickDataset={(dataset => this.toggle(dataset.name, this.state.selected[name]))}
          beforeRow={dataset => this.beforeRow(dataset)}
          afterRow={dataset => this.afterRow(dataset)}
        />
      </div>
    )
  }
  toggle(name){
    this.setState({
      ...this.state,
      selected: {
        ...this.state.selected,
        [name]: !this.state.selected[name],
      }
    })
  }
  beforeRow(dataset){
    // console.log(dataset)
  }
  afterRow(dataset){
    const name = dataset.name
    return (
      <div>
        <input
          type="checkbox"
          value={name}
          checked={!!this.state.selected[name]}
        />
      </div>
    )
  }
  doImport(){
    const { samplernn } = this.props
    console.log(this.state)
    this.props.actions.import_files(this.state, samplernn.data.datasetLookup, samplernn.data.fileLookup)
  }
}

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

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: bindActionCreators(samplernnActions, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNImport)