import React from 'react'

const TaskRow = props => {
  const { task } = props
  const project = props.projects.find(p => p.id === task.projectId) || 'None'
  const projectName = project.name || 'None'
  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>

      <span>{task.desc}</span>
      {!props.selectedProjectId ? (
        <button
          className="btn btn-outline-dark ml-5"
          onClick={() => props.selectProject(task.projectId)}
        >
          {projectName}
        </button>
      ) : null}

      <button
        className={`btn btn-${
          task.completed ? 'secondary' : 'outline-success'
        } float-right`}
        onClick={() => props.completeTask(task.id)}
      >
        &#10004;
      </button>
    </li>
  )
}
export default TaskRow