frontend/src/tasks/taskActions.tsx

import {
  IconButton,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuItem,
  Theme
} from "@mui/material";
import { blue } from "@mui/material/colors";
import MoreIcon from "@mui/icons-material/MoreVert";
import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
import { pond } from "protobuf-ts/pond";
import React, { useState } from "react";
import { isOffline } from "utils/environment";
import ObjectTeams from "teams/ObjectTeams";
import { Task, taskScope } from "models";
import { makeStyles } from "@mui/styles";
import { Done, Edit } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete";
import TaskSettings from "./TaskSettings";

const useStyles = makeStyles((theme: Theme) => ({
    shareIcon: {
      color: blue["500"],
      "&:hover": {
        color: blue["600"]
      }
    },
    removeIcon: {
      color: "var(--status-alert)"
    },
    red: {
      color: "var(--status-alert)"
    }
}));

interface Props {
  task: Task;
  permissions: pond.Permission[];
  keys: string[]
  types: string[]
  refreshCallback: () => void;
  markComplete: (task: Task) => void;
  removeTask: (task: Task) => void;
}

interface OpenState {
  // share: boolean;
  // users: boolean;
  teams: boolean;
  settings: boolean;
  // removeSelf: boolean;
  delete: boolean
}

export default function TaskActions(props: Props) {
  const classes = useStyles();
  const { task, permissions, refreshCallback, keys, types } = props;
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [openState, setOpenState] = useState<OpenState>({
    // share: false,
    // users: false,
    teams: false,
    settings: false,
    // removeSelf: false
    delete: false
  });

  const groupMenu = () => {
    // const canShare = permissions.includes(pond.Permission.PERMISSION_SHARE);
    const canEdit = permissions.includes(pond.Permission.PERMISSION_WRITE);
    const canManageUsers = permissions.includes(pond.Permission.PERMISSION_USERS);
    return (
      <Menu
        id="groupMenu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={() => setAnchorEl(null)}
        keepMounted
        disableAutoFocusItem>
        {/* {!isOffline() && canShare && (
          <MenuItem
            dense
            onClick={() => {
              setOpenState({ ...openState, share: true });
              setAnchorEl(null);
            }}>
            <ListItemIcon>
              <ShareObjectIcon className={classes.shareIcon} />
            </ListItemIcon>
            <ListItemText primary="Share" />
          </MenuItem>
        )} */}
        {/* {!isOffline() && canManageUsers && (
          <MenuItem
            dense
            onClick={() => {
              setOpenState({ ...openState, users: true });
              setAnchorEl(null);
            }}>
            <ListItemIcon>
              <ObjectUsersIcon />
            </ListItemIcon>
            <ListItemText primary="Users" />
          </MenuItem>
        )} */}
        {!isOffline() && canEdit && (
        <MenuItem
          onClick={() => {
            props.markComplete(props.task);
            setAnchorEl(null);
          }}>
          <ListItemIcon>
            <Done style={{ color: "green" }} />
          </ListItemIcon>
          <ListItemText primary="Mark Complete" />
        </MenuItem>
        )}
        {!isOffline() && canEdit && (
          <MenuItem
            dense
            onClick={() => {
              setOpenState({ ...openState, settings: true });
              setAnchorEl(null);
            }}>
            <ListItemIcon>
              <Edit />
            </ListItemIcon>
            <ListItemText primary="Edit" />
          </MenuItem>
        )}
        {!isOffline() && canManageUsers && (
          <MenuItem
            dense
            onClick={() => {
              setOpenState({ ...openState, teams: true });
              setAnchorEl(null);
            }}>
            <ListItemIcon>
              <ObjectTeamsIcon />
            </ListItemIcon>
            <ListItemText primary="Teams" />
          </MenuItem>
        )}
        {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
          <MenuItem
            onClick={() => {
              props.removeTask(props.task);
              setAnchorEl(null);
            }}>
            <ListItemIcon>
              <DeleteIcon className={classes.red} />
            </ListItemIcon>
            <ListItemText primary="Delete" />
          </MenuItem>
        )}
        {/* <MenuItem
          dense
          onClick={() => {
            setOpenState({ ...openState, removeSelf: true });
            setAnchorEl(null);
          }}>
          <ListItemIcon>
            <RemoveSelfIcon className={classes.red} />
          </ListItemIcon>
          <ListItemText primary="Leave" />
        </MenuItem> */}
      </Menu>
    );
  };

  const dialogs = () => {
    const key = task.key;
    // const label = task.title();
    return (
      <React.Fragment>
        {/* <ShareObject
          scope={fieldScope(key)}
          label={label}
          permissions={permissions}
          isDialogOpen={openState.share}
          closeDialogCallback={() => setOpenState({ ...openState, share: false })}
        /> */}
        {/* <ObjectUsers
          scope={fieldScope(key)}
          label={label}
          permissions={permissions}
          isDialogOpen={openState.users}
          closeDialogCallback={() => setOpenState({ ...openState, users: false })}
          refreshCallback={refreshCallback}
        /> */}
        {/* <RemoveSelfFromObject
          scope={fieldScope(key)}
          label={label}
          isDialogOpen={openState.removeSelf}
          closeDialogCallback={() => setOpenState({ ...openState, removeSelf: false })}
        /> */}
        <ObjectTeams
          scope={taskScope(key)}
          label="Teams"
          permissions={permissions}
          isDialogOpen={openState.teams}
          refreshCallback={refreshCallback}
          closeDialogCallback={() => setOpenState({ ...openState, teams: false })}
          keys={keys}
          types={types}
        />
        <TaskSettings
          open={openState.settings}
          task={task}
          //objectKey={objectKey}
          //startDate={startDate}
          onClose={r => {
            setOpenState({ ...openState, settings: false})
            if(r){
              refreshCallback()
            }
          }}
        />
      </React.Fragment>
    );
  };

  return (
    <React.Fragment>
      <IconButton
        disabled={!permissions.includes(pond.Permission.PERMISSION_WRITE)}
        aria-owns={anchorEl ? "groupMenu" : undefined}
        aria-haspopup="true"
        onClick={(event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget)}>
        <MoreIcon />
      </IconButton>
      {groupMenu()}
      {dialogs()}
    </React.Fragment>
  );
}