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 Dataset extends Component {
  constructor(props){
    super()
    this.handleName = this.handleName.bind(this)
    this.handleUpload = this.handleUpload.bind(this)
    this.handleURL = this.handleURL.bind(this)
    this.pickFile = this.pickFile.bind(this)
  }
  handleName(name) {
    const { module, folder, actions } = this.props
    actions.dataset.createOrUpdateFolder(module, folder)
  }
  handleUpload(file) {
    const { module, folder, actions } = this.props
    actions.dataset.uploadFile(module, folder, file)
  }
  handleURL(url) {
    const { module, folder, actions } = this.props
    actions.dataset.fetchURL(module, folder, url)
  }
  pickFile(file){
    console.log('pick', file)
    this.props.onPick && this.props.onPick(file)
  }
  render(){
    const {
      loading, status, error,
      module, title, folder, files,
      canRename, canUpload, canAddURL, canDeleteFile,
      linkFiles,
      fileOptions, pickFile
    } = this.props
    // sort files??
    return (
      <div className='dataset'>
        <div className='params row'>
          <div className='column'>
            <Group title={title || 'Dataset'}>
              {canRename
              ? this.renderFolderNameInput(folder.name)
              : <Param title='Dataset name'>{folder.name}</Param>}
              {folder.id && canUpload && this.renderUploadInput()}
              {folder.id && canAddURL && this.renderURLInput()}
            </Group>
          </div>
        </div>
        <div className='params col'>
          <FileList
            title='Files'
            files={files}
            options={fileOptions}
            onClick={pickFile}
            canDelete={canDeleteFile}
            linkFiles={linkFiles}
          />
        </div>
      </div>
    )
  }
  renderFolderNameInput(name){
    return <TextInput
      title='Dataset name'
      value={name}
      onSave={this.handleName}
    />
  }
  renderUploadInput(){
    return <FileUpload
      title='Upload a file'
      mime='image.*'
      onUpload={this.handleUpload}
    />
  }
  renderURLInput(){
    return <TextInput
      title='Fetch a URL'
      placeholder='http://'
      onSave={this.handleURL}
    />
  }
}

const mapStateToProps = state => state.dataset

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

export default connect(mapStateToProps, mapDispatchToProps)(Dataset)