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

import actions from '../actions'

import DatasetForm from './dataset.form'
import NewDatasetForm from './dataset.new'
import { FileList, FileRow } from '../common/fileList.component'
import Loading from '../common/loading.component'

class DatasetComponent extends Component {
  render(){
    const { loading, progress, module, data, folder, match, history } = this.props
    if (loading) {
      return <Loading progress={progress} />
    }
    if (!data.folders.length) {
      console.log('no folders, redirect to /new')
      return history.push('/' + module.name + '/new/')
    }
    if (!folder || !folder.name) return
    return (
      <div class='rows params datasets'>
        <div class='row row-heading dataset'>
          <div class='col'>input</div>
          <div class='col'>status</div>
          <div class='col'>checkpoint</div>
          <div class='col'>output</div>
        </div>
        {this.renderGroups()}
      </div>
    )
  }
  renderGroups(){
    const { module, data, folder, runner, onPickDataset, onPickFile, datasetActions } = this.props
    const { datasetLookup, fileLookup } = data
    const { mapFn, sortFn } = util.sort.orderByFn('date desc')
    const moduleOnCPU = runner && runner.cpu.task && runner.cpu.task.module === module.name
    const moduleOnGPU = runner && runner.gpu.task && runner.gpu.task.module === module.name
    const datasets = folder.datasets.map(name => datasetLookup[name]).map(mapFn).sort(sortFn).map(pair => {
      const dataset = pair[1]
      let status = ''
      let isProcessing = false, isFetching = false
      if (moduleOnGPU && runner.gpu.task.dataset === dataset) {
        status = util.gerund(runner.gpu.task.activity)
        isProcessing = true
      } else if (moduleOnCPU && runner.cpu.task.activity === 'fetch' && runner.cpu.task.opt.file_id === dataset.input[0]) {
        isProcessing = true
        isFetching = true
      }
      return (
        <div key={dataset.name} className='row dataset' onClick={() => onPickDataset && onPickDataset(dataset)}>
          {this.props.beforeRow && this.props.beforeRow(dataset)}
          <div className='col'>
            {!!dataset.input.length &&
              <FileList
                files={dataset.input.map(id => fileLookup[id])}
                className='input_files'
                fileListClassName=''
                rowClassName='input_file'
                fields={'name date size delete'}
                onClick={onPickFile}
                onDelete={(file) => this.onDeleteFile(file)}
              />
            }
          </div>
          <div className={[
              'col', 'quiet',
              (dataset.isBuilt ? 'built' : 'not_built'),
              (isProcessing ? 'processing': 'not_processing')
            ].join(' ')}>
            {this.props.datasetActions && this.props.datasetActions(dataset, isFetching, isProcessing)}
            {status}
          </div>
          <div className='col checkpoint'>
            {!!dataset.checkpoints.length &&
              <FileRow
                file={dataset.checkpoints[0]}
                fields={'name date epoch'}
                className='row checkpoint'
              />
            }
          </div>
          <div className='col'>
            {!!dataset.output.length &&
              <FileList
                files={dataset.output.map(id => fileLookup[id])}
                orderBy='epoch desc'
                fields={'name date epoch size'}
                onPickFile={onPickFile}
                onDelete={(file) => this.onDeleteFile(file)}
              />
            }
          </div>
          {this.props.afterRow && this.props.afterRow(dataset)}
        </div>
      )
    })
    return datasets
  }
  onDeleteFile(file){
    const yes = confirm('Are you sure you want to delete this file?')
    if (yes) {
      console.log('delete: confirmed')
      if (this.props.onDeleteFile) {
        console.log('calling custom deletefile function')
        this.props.onDeleteFile(file)
      } else {
        actions.file.destroy(file)
      }
    }
  }
}

const mapStateToProps = state => ({
  runner: state.system.runner,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(DatasetComponent)