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