import { h, Component } from 'preact'
import { Link } from 'react-router-dom'

import TaskForm from '../../containers/taskForm.js'

import client from '../../client.js'

export default class Tasks extends Component {
  constructor(props) {
    super()
    this.state = {
      adding: false,
      tasks: [],
    }
    client.task.index().then( tasks => this.setState({ tasks }) )
  }
  render() {
//           <span class='name'>{task.result_file.name}</span>
    const tasks = (this.state.tasks || []).map( (task, i) => {
      return (
        <div key={i} onClick={() => this.toggle(task)}>
          <span>{task.id}</span>
          <span>{task.created_at}</span>
          <span class='name'>{task.content_file.name}</span>
          <span class='name'>{task.style_file.name}</span>
          <span>{task.alpha}</span>
        </div>
      )
    })
    return (
      <div class='column'>
        <div class='window'>
          <div class='heading'>
            <b>create task</b>
          </div>
          <TaskForm />
        </div>
        <div class='window'>
          <div class='heading'>
            <b>recent tasks</b>
          </div>
          <div class='list'>
            {tasks}
          </div>
        </div>
      </div>
    )
  }
}