import { h, Component } from 'preact'

import format from '../../vendor/format.js'
import FileLink from '../../containers/fileLink.js'

export default function TaskListView (props) {
  const tasks = (props.tasks || []).map( (task, i) => {
    const created_at = format.verboseDate(task.created_at)
    let files = []
    let cancel
    if (task.content_file) {
      files.push(
        <span class='name'><FileLink file={task.content_file} /></span>
      )
    }
    if (task.style_file) {
      files.push(
        <span class='name'><FileLink file={task.style_file} /></span>
      )
    }
    if (! task.output_file && ! task.processing) {
      cancel = (
        <span class='cancel' onClick={() => props.cancelTask(task)}>x</span>
      )
    }
    const completed = task.completed ? 'completed' : ''
    let filename = task.output_file ? task.output_file.name :
                   task.processing ? '(processing)' : '(waiting)'
    return (
      <div key={i}>
        <div class='row'>
          <span class='date'>{created_at.date}</span>
          <span class='time'>{created_at.time}</span>
          <span class={'name output ' + completed}><FileLink file={task.output_file}>{filename}</FileLink></span>
          {cancel}
        </div>
        <div class='row'>
          <span class='alpha'>α={task.alpha}</span>
          {files}
        </div>
      </div>
    )
        // <span class='name'>{task.result_file.name}</span>
  })
  return (
    <div class='tasks list'>
      {tasks}
    </div>
  )
}