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

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

import Group from '../common/group.component'
import Param from '../common/param.component'
import { FileList } from '../common/fileList.component'
import FileUpload from '../common/fileUpload.component'
import TextInput from '../common/textInput.component'

class DatasetForm extends Component {
  constructor(props){
    super()
  }
  render(){
    const {
      loading, status, error,
      module, folder, title='Dataset',
      canRename, canUpload, canAddURL
    } = this.props
    // sort files??

    if (!folder.id) {
      return (
        <div className='params row'>
          <div className='column'>
            {this.renderFolderNameInput(folder.name)}
          </div>
        </div>
      )
    }
    return (
      <div className='form params row'>
        <div className='col'>
          <Group>
            {canRename && this.renderFolderNameInput(folder.name)}
            {canUpload && this.renderUploadInput()}
            {canAddURL && this.renderURLInput()}
          </Group>
        </div>
      </div>
    )
  }
  curry(action) {
    const { module, folder } = this.props
    return (param) => action(module, folder, param)
  }
  renderFolderNameInput(name){
    return <TextInput
      title={!this.props.folder.id ? 'Create a new dataset' : 'Dataset name'}
      value={name}
      onSave={this.curry(this.props.actions.dataset.createOrUpdateFolder)}
    />
  }
  renderUploadInput(){
    return <FileUpload
      title='Upload a file'
      mime='image.*'
      onUpload={this.curry(this.props.actions.dataset.uploadFile)}
    />
  }
  renderURLInput(){
    return <TextInput
      title='Fetch a URL'
      placeholder='http://'
      onSave={this.curry(this.props.actions.dataset.handleURL)}
    />
  }
}

const mapStateToProps = state => state.dataset

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

export default connect(mapStateToProps, mapDispatchToProps)(DatasetForm)