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 DrawerNotification from '../DrawerNotification';
 15import useProfile from '../../hooks/useProfile';
 16import {Chip} from '@mui/material';
 17
 18const EventBar = ({event, onAdd, goBack, title}) => {
 19  const {connected} = useProfile();
 20  const theme = useTheme();
 21  const {share} = useShare();
 22  const [anchorEl, setAnchorEl] = useState(null);
 23  const menuActions = useActions({onAdd, eventId: event?.id});
 24  const isCarosterPlusEvent = event?.enabled_modules?.includes('caroster-plus');
 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          flexGrow={1}
 45          display="flex"
 46          justifyContent="space-start"
 47          pr={1}
 48          gap={1}
 49        >
 50          {goBack && (
 51            <IconButton
 52              sx={{color: 'inherit'}}
 53              edge="start"
 54              onClick={goBack}
 55              size="large"
 56            >
 57              <Icon>chevron_left</Icon>
 58            </IconButton>
 59          )}
 60          <Tooltip title={title || event.name || ''}>
 61            <Typography
 62              variant="h6"
 63              noWrap
 64              sx={{maxWidth: `calc(100vw - ${theme.spacing(28)})`}}
 65            >
 66              {title || event.name}
 67            </Typography>
 68          </Tooltip>
 69          {isCarosterPlusEvent && (
 70            <Chip
 71              label="Plus"
 72              size="small"
 73              variant="outlined"
 74              sx={{color: 'white', borderColor: 'white'}}
 75            />
 76          )}
 77        </Box>
 78        <>
 79          <IconButton
 80            sx={{marginRight: 0}}
 81            color="inherit"
 82            edge="end"
 83            id="ShareBtn"
 84            onClick={() =>
 85              share({
 86                title: `Caroster ${event.name}`,
 87              })
 88            }
 89            size="large"
 90          >
 91            <Icon>share</Icon>
 92          </IconButton>
 93          {connected && <DrawerNotification />}
 94          <IconButton
 95            color="inherit"
 96            edge="end"
 97            id="MenuMoreInfo"
 98            onClick={e => setAnchorEl(e.currentTarget)}
 99            size="large"
100          >
101            <UserIcon />
102          </IconButton>
103          <GenericMenu
104            anchorEl={anchorEl}
105            setAnchorEl={setAnchorEl}
106            actions={menuActions}
107          />
108        </>
109      </Toolbar>
110    </AppBar>
111  );
112};
113
114export default EventBar;