import React from "react";
import { connect } from "react-redux";
import ProjectList from "./projectList";
import TaskList from "./taskList";
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';

// Dashboard shows projects loaded from cloud based NoSqL which is in sync with a relational
// database which holds security and other relationship based information about the projects
// When a project is selected various artifacts in the project are shown based on template
// it was based on.
function Dashboard(props) {
  if (props.selectedProjectId !== "0") {
    const selectedProject = (projects, selectedProjectId) => {
      return projects.filter((project) => project.id === selectedProjectId);
    };

    const project = props.projects.find(
    (project) => project.projectId === props.selectedProjectId
    );

    // return TaskList as a table with two columns WBS numbers and Tasks when a project is selected
    // WBS number is recalculated when change occurs
    // regardless of the template used task decomposition is utilized until task can be assigned to
    // one and only one resource. Resource can be a person, team, departement or company.
      return (
        <>
        <div>
          <Box
            sx={{
            display: 'flex',
            '& > :not(style)': {
            m: 1,
            width: 480,
            height: 1/2,
            },
          }}
          >
          <Paper elevation={2}>
          <h4> {project ? project.projectName : "No Project Selected - Please select one"} </h4>
          <ProjectList />
          <TaskList />
          </Paper>
          </Box>
        </div>
        </>
        );
    } else {
      return (
      <div>
        <h2> Please select a project </h2>
        <ProjectList />
      </div>
    );
  }
}

export default connect(mapStateToProps)(Dashboard);

function mapStateToProps(state) {
  return {
    projects: state.projectsReducer.projects,
    selectedProjectId: state.projectsReducer.selectedProjectId,
  };
}