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

import * as datasetActions from './dataset.actions'

import TextInput from '../common/textInput.component'

function NewDatasetForm (props) {
  const { loading, status, error, history, actions, module } = props
  if (loading) return <span>Loading...</span>
    console.log(props)
  return (
    <div class='opaque'>
      <div class='heading'>
        <h2>Create a new dataset</h2>
      </div>
      <div class='params'>
        <TextInput
          autofocus
          title={'Name your dataset'}
          onSave={(name) => {
            actions.createFolder(module, name)
            .then(folder => {
              window.location.href = '/samplernn/datasets/' + folder.id + '/'
            })
          }}
        />
      </div>
    </div>
  )
}

const mapStateToProps = state => {
  console.log(state);
  return state.dataset
}

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

export default connect(mapStateToProps, mapDispatchToProps)(NewDatasetForm)