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

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

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

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

const mapStateToProps = state => ({})

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

export default connect(mapStateToProps, mapDispatchToProps)(NewDatasetForm)