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

import {
  Group, Param
} from '../../../common'

import NewDatasetForm from '../../../dataset/dataset.new'

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

class SampleRNNNew extends Component {
  constructor(props){
    super(props)
    props.actions.load_directories()
  }
  render(){
    const { samplernn, history } = this.props
    console.log(samplernn)
    let folders
    if (samplernn.data) {
      folders = samplernn.data.folders.map(folder => {
        console.log(folder)
        const datasetCount = folder.datasets ? folder.datasets.length : 0
        const [ className, size ] = util.hush_null(datasetCount)
        return (
          <Param title={<Link to={'/samplernn/datasets/' + folder.id + '/'}>{folder.name}</Link>}>
            <span className={className}>{datasetCount} dataset{util.courtesy_s(datasetCount)}</span>
          </Param>
        )
      })
    }
    return (
      <div class='app samplernn'>
        <div class='col narrow'>
          <NewDatasetForm module={samplernnModule} history={history} />
          {folders && <div class='col folderList'>
            <Group title='Projects'>
              {folders}
            </Group>
          </div>}
        </div>
      </div>
    )
  }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNNew)