1import {useState, useEffect} from 'react';
  2import {useTheme} from '@mui/material/styles';
  3import {useRouter} from 'next/router';
  4import Toolbar from '@mui/material/Toolbar';
  5import Typography from '@mui/material/Typography';
  6import IconButton from '@mui/material/IconButton';
  7import Box from '@mui/material/Box';
  8import Avatar from '@mui/material/Avatar';
  9import Icon from '@mui/material/Icon';
 10import AppBar from '@mui/material/AppBar';
 11import useProfile from '../../hooks/useProfile';
 12import GenericMenu from '../GenericMenu';
 13import {ActionType} from '../GenericMenu/Action';
 14import {useSession} from 'next-auth/react';
 15import DrawerNotification from '../DrawerNotification';
 16
 17const GenericToolbar = ({
 18  title,
 19  actions = [],
 20  goBack = false,
 21}: {
 22  title: string;
 23  actions: Array<ActionType>;
 24  goBack?: boolean;
 25}) => {
 26  const router = useRouter();
 27  const theme = useTheme();
 28  const [anchorEl, setAnchorEl] = useState(null);
 29
 30  const {profile, connected} = useProfile();
 31
 32  const session = useSession();
 33  const isAuthenticated = session.status === 'authenticated';
 34
 35  useEffect(() => {
 36    window.scrollTo(0, 0);
 37  }, []);
 38
 39  return (
 40    <AppBar
 41      position="static"
 42      color="transparent"
 43      sx={{
 44        minHeight: theme.mixins.toolbar.minHeight,
 45        transition: 'height 0.3s ease',
 46        display: 'block',
 47        color: 'text',
 48        boxShadow: 'none',
 49        p: theme.spacing(4, 0),
 50      }}
 51      id="Menu"
 52    >
 53      <Toolbar
 54        sx={{
 55          display: 'flex',
 56          justifyContent: 'space-between',
 57          px: 2,
 58          [theme.breakpoints.down('md')]: {
 59            pl: 2,
 60            pr: 2,
 61          },
 62        }}
 63      >
 64        <Box
 65          sx={{display: 'flex', justifyContent: 'space-start', pl: 0, pr: 1}}
 66        >
 67          {goBack && (
 68            <IconButton
 69              edge="start"
 70              sx={{color: theme.palette.common.black, my: 2}}
 71              onClick={() => router.back()}
 72              size="large"
 73            >
 74              <Icon>chevron_left</Icon>
 75            </IconButton>
 76          )}
 77          <Typography variant="h2" noWrap sx={{pt: 3}}>
 78            {title}
 79          </Typography>
 80        </Box>
 81        <Box>
 82          {isAuthenticated && <DrawerNotification />}
 83          {actions.length > 0 && (
 84            <>
 85              <IconButton
 86                color="inherit"
 87                edge="end"
 88                id="MenuMoreInfo"
 89                onClick={e => setAnchorEl(e.currentTarget)}
 90                size="large"
 91              >
 92                {connected && profile ? (
 93                  <Avatar
 94                    sx={{
 95                      width: theme.spacing(3),
 96                      height: theme.spacing(3),
 97                      fontSize: 16,
 98                    }}
 99                  >
100                    {`${profile.username[0]}`.toUpperCase()}
101                  </Avatar>
102                ) : (
103                  <Icon>more_vert</Icon>
104                )}
105              </IconButton>
106
107              <GenericMenu
108                anchorEl={anchorEl}
109                setAnchorEl={setAnchorEl}
110                actions={[...actions, {divider: true}]}
111              />
112            </>
113          )}
114        </Box>
115      </Toolbar>
116    </AppBar>
117  );
118};
119
120export default GenericToolbar;