import React from 'react'

const TaskRow = props => {
  const { task } = props
  const project = props.projects.find(p => p.id === task.projectId)
  return (
    <li className="list-group-item" key={task.id} onClick={props.editTask}>
      <button
        className="btn btn-outline-danger mr-1"
        onClick={() => props.deleteTask(task.id)}
      >
        X
      </button>

      <button className="btn ml-1" onClick={() => props.selectTask(task.id)}>
        {task.desc}
      </button>
      <button
        className={`btn btn-${
          task.completed ? 'secondary' : 'outline-success'
        } float-right`}
        onClick={() => props.completeTask(task.id)}
      >
        &#10004;
      </button>
      {props.component === 'project' ? (
        ''
      ) : task.projectId ? (
        <button
          className="btn ml-3 mr-2 float-right"
          onClick={() => props.selectProject(task.projectId)}
        >
          {project.name}
        </button>
      ) : (
        ''
      )}
    </li>
  )
}
export default TaskRow