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 SampleRNNDatasets from './samplernn.datasets'

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

class SampleRNNImport extends Component {
  constructor(){
    super()
    this.state = {
      folder: 1,
      url_base: ''
    }
  }
  render(){
    let datasets = [];
    if (this.props.samplernn.data) {
      datasets = (this.props.samplernn.data.folders || []).map(folder => {
        console.log(folder.id, folder.name)
        return [folder.name, folder.id]
      })
      console.log(datasets)
    }
    return (
      <div className='app'>
        <div class='heading'>
          <h1>Import</h1>
        </div>
        <div class='params form row'>
          <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 })}
            />
            <TextInput
              title="URL base"
              value={this.state.url_base}
              placeholder="http://"
              onSave={(value) => this.setState({ url_base: value })}
            />
          </div>
        </div>
        <SampleRNNDatasets
          id="unsorted"
          history={this.props.history}
          beforeRow={dataset => this.beforeRow(dataset)}
          afterRow={dataset => this.afterRow(dataset)}
        />
      </div>
    )
  }
  beforeRow(dataset){
    // console.log(dataset)
    return null
  }
  afterRow(dataset){
    return null
  }
}

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)