import React from 'react'
import Tasks from './tasks'

function Project(props) {
  if (!props.selectedProjectId) {
    props.navigate('projects')
    return null
  }
  const project = props.projects.find(p => p.id === props.selectedProjectId)
  const filtered = props.tasks.filter(t => t.projectId === props.selectedProjectId && !t.completed)
  const completed = props.tasks.filter(
    t => (t.projectId === props.selectedProjectId && t.completed === true) || null,
  )

  return (
    <div>
      <span className="btn btn-primary" onClick={() => props.navigate('projects')}>Back</span>
      <h2>{project.name}</h2>
      <Tasks filtered={filtered} completed={completed} {...props} />
    </div>
  )
}

export default Project