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

import actions from '../actions'

class TaskList extends Component {
  constructor(props){
    super()
  }
  shouldComponentUpdate(nextProps){
    if (nextProps.tasks.length !== this.props.tasks.length) {
      return true
    }
    if (nextProps.tasks[0] !== this.props.tasks[0]) {
      return true
    }
    return false
  }
  render(){
    const { title, tasks } = this.props
    let time = 0
    const { mapFn, sortFn } = util.sort.orderByFn(this.props.sort || 'date desc')
    const taskList = tasks.map(mapFn).sort(sortFn).map(pair => {
      const task = pair[1]
      const { dataset } = task
      let dataset_link, label = dataset;
      console.log(task)
      switch (task.activity) {
        case 'train':
          if (task.epoch === 0) {
            label += ', latest'
          } else {
            label += ', ' + task.epoch
          }
          label += ' + ' + task.epochs
          break
        case 'augment':
          try {
            const opt = JSON.parse(task.opt)
            label += ', ' + opt.augment_take + ' x ' + opt.augment_make
          } catch (e) {
            //
          }
        default:
          break
      }
      if (task.folder_id) {
        const href = '/' + task.module +
                     '/' + (task.module === 'samplernn' ? 'datasets' : 'sequences') +
                     '/' + task.folder_id + '/'
        dataset_link = <Link to={href}>{label}</Link>
      } else {
        dataset_link = label
      }
      return (
        <div class='row'>
          <div class='activity'>{task.activity} {task.module}</div>
          <div class='dataset'>{dataset_link}</div>
          <div className={"age " + util.carbon_date(task.updated_at)}>{util.get_age(task.updated_at)}</div>
          <div class='options'>
            <span class='destroy' onClick={() => this.handleDestroy(task)}>x</span>
          </div>
        </div>
      )
    })
    return (
      <div class='tasklist rows'>
        {taskList}
      </div>
    )
  }
  handleDestroy(task) {
    const yes = confirm('Are you sure you want to delete this task?')
    if (yes) {
      actions.task.destroy(task)
    }
  }
}

const mapStateToProps = state => ({
})

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

export default connect(mapStateToProps, mapDispatchToProps)(TaskList)