import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Theme,
  Typography
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import { useGroupAPI, useSnackbar } from "hooks";
import { Group } from "models";

const useStyles = makeStyles((theme: Theme) => {
  return ({
    contentPadding: {
      paddingTop: theme.spacing(2),
      paddingBottom: theme.spacing(2)
    }
  })
});

interface Props {
  group: Group;
  isDialogOpen: boolean;
  closeDialogCallback: Function;
  removeCallback?: Function;
}

export default function RemoveGroup(props: Props) {
  const classes = useStyles();
  // const navigate = useNavigate();
  const groupAPI = useGroupAPI();
  const { success, error, warning } = useSnackbar();
  const { group, isDialogOpen, closeDialogCallback, removeCallback } = props;
  let groupName = group.name();

  const closeDialog = () => {
    closeDialogCallback();
  };

  const submit = () => {
    groupAPI
      .removeGroup(group.id())
      .then((_response: any) => {
        success(groupName + " was successfully removed");
        if (removeCallback) removeCallback()
      })
      .catch((err: any) => {
        err ? warning(err) : error("Error occured while removing " + groupName);
        closeDialog();
      }).finally(() => {
        closeDialogCallback()
      });
  };

  return (
    <Dialog
      open={isDialogOpen}
      fullWidth
      onClose={closeDialog}
      aria-labelledby="remove-group-label"
      aria-describedby="remove-group-description">
      <DialogTitle id="remove-group-title">Delete {groupName}?</DialogTitle>
      <DialogContent className={classes.contentPadding}>
        <Typography color="error" align="left" variant="subtitle1">
          WARNING:
        </Typography>
        <Typography color="textPrimary" align="left" variant="body1">
          Clicking 'Accept' will delete {groupName} for you and all other users.
        </Typography>
        <Typography color="textSecondary" align="left" variant="body2">
          Devices will NOT be deleted in this process.
        </Typography>
      </DialogContent>
      <DialogActions>
        <Button onClick={closeDialog} color="primary">
          Cancel
        </Button>
        <Button onClick={submit} color="primary">
          Accept
        </Button>
      </DialogActions>
    </Dialog>
  );
}