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