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

import TaskForm from './TaskForm.jsx'

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

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