import React from "react";
import { connect } from "react-redux";
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

function ProjectList(props) {
  function handleSelectProject(id) {
    props.dispatch({ type: "SELECT_PROJECT", id });
  }

  const loadedProjects = props.projects
  const loadedProjectID = props.selectedProjectId
  console.log(loadedProjects)
  return (
    <>
    <div>
      <Box sx={{ minWidth: 100 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Projects</InputLabel>
          <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
//          value={JSON.stringify(loadedProjectID)}
          label="Projects"
        >
        {loadedProjects.map(({ projectId, projectName }) => (
            <MenuItem
            key={projectId}
            onClick={() => handleSelectProject(projectId)}
            value={projectName}
//          className={loadedProjectID === projectId ? "selected" : ""}
            > 
            {projectName} 
            </MenuItem>
        ))}
        </Select>
      </FormControl>
    </Box>
    </div>
    </>
  );
}

export default connect(mapStateToProps)(ProjectList);

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