1import {useState} from 'react';
  2import AppBar from '@mui/material/AppBar';
  3import Toolbar from '@mui/material/Toolbar';
  4import Typography from '@mui/material/Typography';
  5import IconButton from '@mui/material/IconButton';
  6import Tooltip from '@mui/material/Tooltip';
  7import Icon from '@mui/material/Icon';
  8import Box from '@mui/material/Box';
  9import {useTheme} from '@mui/styles';
 10import useShare from '../../hooks/useShare';
 11import GenericMenu from '../GenericMenu';
 12import useActions from './useActions';
 13import UserIcon from './UserIcon';
 14import {useSession} from 'next-auth/react';
 15import DrawerNotification from '../DrawerNotification';
 16
 17const EventBar = ({event, onAdd, goBack, title}) => {
 18  const session = useSession();
 19  const isAuthenticated = session.status === 'authenticated';
 20  const theme = useTheme();
 21  const {share} = useShare();
 22  const [anchorEl, setAnchorEl] = useState(null);
 23
 24  const menuActions = useActions({onAdd, eventId: event?.id});
 25
 26  return (
 27    <AppBar
 28      sx={{
 29        top: 0,
 30        right: 0,
 31        width: '100%',
 32        overflow: 'hidden',
 33        minHeight: theme.mixins.toolbar.minHeight,
 34        transition: 'height 0.3s ease',
 35        backgroundColor: 'transparent',
 36        backgroundImage: `linear-gradient(${theme.palette.background.grey} 0%, rgba(0,0,0,0) 90%)`,
 37      }}
 38      position="absolute"
 39      elevation={0}
 40      id="Menu"
 41    >
 42      <Toolbar>
 43        <Box
 44          sx={{
 45            flexGrow: 1,
 46            display: 'flex',
 47            justifyContent: 'space-start',
 48            pl: 0,
 49            pr: 1,
 50          }}
 51        >
 52          {goBack && (
 53            <IconButton
 54              sx={{color: 'inherit'}}
 55              edge="start"
 56              onClick={goBack}
 57              size="large"
 58            >
 59              <Icon>chevron_left</Icon>
 60            </IconButton>
 61          )}
 62          <Tooltip title={title || event.name || ''}>
 63            <Typography
 64              variant="h6"
 65              noWrap
 66              sx={{maxWidth: `calc(100vw - ${theme.spacing(18)})`, my: 2}}
 67            >
 68              {title || event.name}
 69            </Typography>
 70          </Tooltip>
 71        </Box>
 72        <>
 73          <IconButton
 74            sx={{marginRight: 0}}
 75            color="inherit"
 76            edge="end"
 77            id="ShareBtn"
 78            onClick={() =>
 79              share({
 80                title: `Caroster ${event.name}`,
 81              })
 82            }
 83            size="large"
 84          >
 85            <Icon>share</Icon>
 86          </IconButton>
 87          {isAuthenticated && <DrawerNotification />}
 88          <IconButton
 89            color="inherit"
 90            edge="end"
 91            id="MenuMoreInfo"
 92            onClick={e => setAnchorEl(e.currentTarget)}
 93            size="large"
 94          >
 95            <UserIcon />
 96          </IconButton>
 97          <GenericMenu
 98            anchorEl={anchorEl}
 99            setAnchorEl={setAnchorEl}
100            actions={menuActions}
101          />
102        </>
103      </Toolbar>
104    </AppBar>
105  );
106};
107
108export default EventBar;