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