frontend/src/tasks/TaskCard.tsx

import {
  Box,
  Card,
  CardActionArea,
  Grid2 as Grid,
  Typography
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import { useCallback, useEffect, useState } from "react";
import { Task } from "models";
import { useGlobalState } from "providers";
import { usePermissionAPI } from "hooks";
import { red } from "@mui/material/colors";
import { pond } from "protobuf-ts/pond";
import EventBlocker from "common/EventBlocker";
import TaskActions from "./taskActions";

interface Props {
  task: Task;
  reLoad: () => void;
  editTaskMethod: (task: Task) => void;
  markComplete: (task: Task) => void;
  deleteTask: (task: Task) => void;
  openTaskPage: (taskId: string) => void;
  keys: string[]
  types: string[]
}

const useStyles = makeStyles(() => ({
    red: {
      color: red["500"]
    }
  })
);

export default function TaskCard(props: Props) {
  const monthList = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "June",
    "July",
    "Aug",
    "Sept",
    "Oct",
    "Nov",
    "Dec"
  ];
  const [month, setMonth] = useState(0);
  const [day, setDay] = useState(0);
  const classes = useStyles();
  const [permissions, setPermissions] = useState<pond.Permission[]>([]);
  const [{ user, as }] = useGlobalState();
  const permissionAPI = usePermissionAPI();

  const loadPermissions = useCallback(() => {
    permissionAPI.getPermissions(user.id(), props.keys, props.types).then(resp => {
      setPermissions(pond.EvaluatePermissionsResponse.fromObject(resp.data).permissions)
    })

  }, [props.task, permissionAPI, user, as]);

  useEffect(() => {
    loadPermissions();
  }, [loadPermissions]);

  const openTaskPage = () => {
    props.openTaskPage(props.task.key);
  };

  useEffect(() => {
    let date = new Date(props.task.start());
    setMonth(date.getUTCMonth());
    setDay(date.getUTCDate());
  }, [props.task]);

  // const taskActions = () => {
  //   return (
  //     <Menu
  //       id="viewMenu"
  //       anchorEl={menuAnchorEl ? menuAnchorEl : null}
  //       open={menuAnchorEl !== null}
  //       onClose={() => setMenuAnchorEl(null)}
  //       disableAutoFocusItem>
  //       <MenuItem
  //         onClick={() => {
  //           props.markComplete(props.task);
  //           setMenuAnchorEl(null);
  //         }}>
  //         <ListItemIcon>
  //           <Done style={{ color: "green" }} />
  //         </ListItemIcon>
  //         <ListItemText primary="Mark Complete" />
  //       </MenuItem>
  //       {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
  //         <MenuItem
  //           onClick={() => {
  //             props.editTaskMethod(props.task);
  //             setMenuAnchorEl(null);
  //           }}>
  //           <ListItemIcon>
  //             <Edit />
  //           </ListItemIcon>
  //           <ListItemText primary="Edit" />
  //         </MenuItem>
  //       )}
  //       {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
  //         <MenuItem
  //           onClick={() => {
  //             props.deleteTask(props.task);
  //             setMenuAnchorEl(null);
  //           }}>
  //           <ListItemIcon>
  //             <DeleteIcon className={classes.red} />
  //           </ListItemIcon>
  //           <ListItemText primary="Delete" />
  //         </MenuItem>
  //       )}
  //     </Menu>
  //   );
  // };

  return (
    <Card style={{ width: "100%", paddingLeft: 5 }}>
      <CardActionArea onClick={openTaskPage} component="div">
        <Grid container direction="row" alignItems="center">
          <Grid size={2}>
            <Box
              style={{
                border: "1px solid white",
                width: "50px",
                height: "50px",
                borderRadius: 5,
                margin: "auto",
                verticalAlign: "middle",
                lineHeight: "50px",
                textAlign: "center"
              }}>
              <Typography>{monthList[month]}</Typography>
              <Typography style={{ fontWeight: 750 }}>{day}</Typography>
            </Box>
          </Grid>
          <Grid size={8}>
            <Box margin={1}>
              <Typography style={{ fontWeight: 700 }}>{props.task.title()}</Typography>
            </Box>
            <Box margin={1}>
              <Typography noWrap>{props.task.description()}</Typography>
            </Box>
          </Grid>
          <Grid size={1}>
            {/* <EventBlocker style={{ margin: "auto" }}>
              <IconButton
                aria-owns={"taskOptions"}
                aria-haspopup="true"
                onClick={event => setMenuAnchorEl(event.currentTarget)}>
                <MoreVert />
              </IconButton>
            </EventBlocker> */}
            <EventBlocker style={{ margin: "auto" }}>
              <TaskActions 
                markComplete={props.markComplete}
                removeTask={props.deleteTask}
                task={props.task}
                permissions={permissions}
                refreshCallback={() => {
                  props.reLoad()
                }}
                keys={props.keys}
                types={props.types}
                />
            </EventBlocker>
          </Grid>
        </Grid>
      </CardActionArea>
      {/* {taskActions()} */}
    </Card>
  );
}