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()
  }
  render(){
    const { title, tasks } = this.props
    let time = 0
    const { mapFn, sortFn } = util.sort.orderByFn('date desc')
	  const taskList = tasks.map(mapFn).sort(sortFn).map(pair => {
      const task = pair[1]
      console.log(task)
      const { dataset } = task
      const href = '/' + task.module +
                   '/' + (task.module === 'samplernn' ? 'datasets' : 'sequences') +
                   '/' + task.folder_id + '/'
	   	return (
		   	<div class='row'>
	        <div class='activity'>{task.activity} {task.module}</div>
	        <div class='dataset'><Link to={href}>{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)