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

import { actions, parser } from '../api'

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 } = this.props
    if (! folder.id) {
      this.props.actions.folder.create({
        // username... should get added inside the API
        module: module.name,
        datatype: module.datatype,
        activity: 'dataset',
        name
      })
    } else {
      this.props.actions.folder.update({
        id: folder.id,
        module: module.name,
        datatype: module.datatype,
        activity: 'dataset',
        name
      })
    }
  }
  handleUpload(file) {
    const { module, folder } = this.props
    const fd = new FormData()
    fd.append('file', file)
    this.props.actions.folder.upload(fd, {
      id: folder.id,
      module: module.name,
      activity: 'file',
      epoch: 0,
      processed: false,
      generated: false,
    })
  }
  handleURL(url) {
    // name url
    // mime datatype
    // duration analysis
    // size activity
    // opt created_at updated_at
    parser.parse(url, media => {
      if (!media) return
      console.log('media', media)
      this.props.actions.file.create({
        folder_id: this.props.folder.id,
        module: this.props.module.name,
        activity: 'url',
        duration: parseInt(media.duration) || 0,
        epoch: 0,
        processed: false,
        generated: false,
        opt: media,
        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'>
          <div class='row heading'>
            {files.length ? 
              <h3>Files</h3> :
              <h4>No files</h4>}
            <div>{(loading || error) && status}</div>
          </div>
          <FileList
            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: {
    folder: bindActionCreators(actions.folder, dispatch),
    file: bindActionCreators(actions.file, dispatch),
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Dataset)