import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
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]
	    let dataset_type, dataset_name 
	    if (task.dataset.indexOf('/') !== -1) {
	    	[dataset_type, dataset_name] = task.dataset.split('/')
	    } else {
	    	dataset_name = task.dataset
	    }
	   	return (
		   	<div class='row'>
	        <div class='activity'>{task.activity} {task.module} {dataset_type}</div>
	        <div class='dataset'>{dataset_name}</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)