frontend/src/app/HeaderButtons.tsx

import { Chat as ChatIcon, Notifications } from "@mui/icons-material";
import { Box, IconButton, Theme, Tooltip } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { ChatDrawer } from "chat/ChatDrawer";
import { Team, User } from "models";
import moment from "moment";
import { pond } from "protobuf-ts/pond";
import { useEffect, useState } from "react";
import { getSignatureAccentColour } from "services/whiteLabel";
import NotificationDrawer from "./NotificationDrawer";


const useStyles = makeStyles((theme: Theme) => ({
  button: {
    color: getSignatureAccentColour(),
    width: theme.spacing(6),
    height: theme.spacing(6),
    marginTop: "auto",
    marginBottom: "auto",
    marginLeft: theme.spacing(0.5)
  },
  on: {
    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
    animationName: "$ripple",
    animationDuration: "1.2s",
    animationTimingFunction: "ease-in-out",
    animationIterationCount: "infinite",
    position: "absolute",
    right: theme.spacing(0.5),
    top: theme.spacing(0.5),
    backgroundColor: theme.palette.primary.main
  },
  off: {
    backgroundColor: "transparent"
  },
  drawerHeader: {
    display: "flex",
    alignItems: "center",
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: "flex-start"
  }
}))

interface Props {
  hasTeams: boolean;
  team: Team;
  user: User
}

export default function HeaderButtons(props: Props) {
  const {hasTeams, user, team} = props
  const [hasNewChats, setHasNewChats] = useState(false);
  const [hasNewNotifications, setHasNewNotifications] = useState(false);
  const [chatDrawerOpen, setChatDrawerOpen] = useState(false);
  const [notificationDrawerOpen, setNotificationDrawerOpen] = useState<boolean>(false);
  const classes = useStyles();

  useEffect(() => {
    if (!team) return;
    if (
      team.preferences.chatViewedTimestamp.length < 1 &&
      team.settings.lastChatTimestamp.length > 1
    ) {
      setHasNewChats(true);
      return;
    }
    let viewMoment = moment(team.preferences.chatViewedTimestamp);
    let chatMoment = moment(team.settings.lastChatTimestamp);
    if (viewMoment.diff(chatMoment) < 0) {
      setHasNewChats(true);
    } else {
      setHasNewChats(false);
    }
  }, [team]);

  useEffect(() => {
    if (!user) return;
    if (!user.status) return;
    if (
      user.status.lastNotificationViewed.length < 1 &&
      user.status.lastNotifiedTimestamp.length > 1
    ) {
      setHasNewNotifications(true);
      return;
    }
    let viewMoment = moment(new Date(user.status.lastNotificationViewed));
    let notiMoment = moment(new Date(user.status.lastNotifiedTimestamp));
    if (viewMoment.diff(notiMoment) < 0) {
      setHasNewNotifications(true);
    } else {
      setHasNewNotifications(false);
    }
  }, [user]);

  // If the drawer has been opened, get rid of the ping
  useEffect(() => {
    if (notificationDrawerOpen) setHasNewNotifications(false);
  }, [notificationDrawerOpen]);

  const chatButton = () => {
    if (!hasTeams) return;
    if (team.key().length < 1) return
    return (
      <>
        <Tooltip title="Team chat">
          <IconButton
            className={classes.button}
            onClick={() => {
              setChatDrawerOpen(true);
              setHasNewChats(false);
            }}>
            <ChatIcon />
            {hasNewChats && (
              <Box
                width="8px"
                height="8px"
                borderRadius="50%"
                className={classes.on}
              />
            )}
          </IconButton>
        </Tooltip>
      </>
    )
  }

  const notificationButton = () => {
    if (!user.settings?.notificationMethods?.includes(
      pond.NotificationMethod.NOTIFICATION_METHOD_APP
    )) return
    return (
      <>
        <Tooltip title="Notifications">
          <IconButton
            className={classes.button}
            onClick={() => {
              setNotificationDrawerOpen(true);
              setHasNewChats(false);
            }}>
            <Notifications />
            {hasNewNotifications && (
              <Box
                width="8px"
                height="8px"
                borderRadius="50%"
                className={classes.on}
              />
            )}
          </IconButton>
        </Tooltip>
      </>
    )
  }

  return (
    <>
    {chatButton()}
    {team && team.settings && team.settings.key && (
      <ChatDrawer 
        open={chatDrawerOpen} 
        onClose={() => setChatDrawerOpen(false)}
        team={team}
      />
    )}
    {notificationButton()}
    <NotificationDrawer
      setNotificationDrawerOpen={setNotificationDrawerOpen}
      notificationDrawerOpen={notificationDrawerOpen}
    />
    </>
  )
}