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 onClick={() => props.selectTask(task.id)}>{task.desc}</span>
      {props.component === 'project' ? null : (
        <button
          className="btn btn-outline-dark ml-5"
          onClick={() => props.selectProject(task.projectId)}
        >
          {projectName}
        </button>
      )}

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