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, useMediaQuery} from '@mui/material';
 17import LinkedEventSwitch from './LinkedEventSwitch';
 18
 19const EventBar = ({event, onAdd, goBack, title}) => {
 20  const {connected} = useProfile();
 21  const theme = useTheme();
 22  const {share} = useShare();
 23  const [anchorEl, setAnchorEl] = useState(null);
 24  const menuActions = useActions({onAdd, eventId: event?.id});
 25  const isCarosterPlusEvent = event?.enabled_modules?.includes('caroster-plus');
 26  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 27
 28  return (
 29    <AppBar
 30      sx={{
 31        top: 0,
 32        right: 0,
 33        width: '100%',
 34        overflow: 'hidden',
 35        minHeight: theme.mixins.toolbar.minHeight,
 36        transition: 'height 0.3s ease',
 37        backgroundColor: 'transparent',
 38        backgroundImage: `linear-gradient(${theme.palette.background.grey} 0%, rgba(0,0,0,0) 90%)`,
 39      }}
 40      position="absolute"
 41      elevation={0}
 42      id="Menu"
 43    >
 44      <Toolbar>
 45        <Box
 46          flexGrow={1}
 47          display="flex"
 48          justifyContent="space-start"
 49          alignItems="center"
 50          pr={1}
 51          gap={1}
 52        >
 53          {goBack && (
 54            <IconButton
 55              sx={{color: 'inherit'}}
 56              edge="start"
 57              onClick={goBack}
 58              size="large"
 59            >
 60              <Icon>chevron_left</Icon>
 61            </IconButton>
 62          )}
 63          <Tooltip title={title || event.name || ''}>
 64            <Typography
 65              variant="h6"
 66              noWrap
 67              sx={{maxWidth: `calc(100vw - ${theme.spacing(28)})`}}
 68            >
 69              {title || event.name}
 70            </Typography>
 71          </Tooltip>
 72          {isCarosterPlusEvent && (
 73            <Chip
 74              label="Plus"
 75              size="small"
 76              variant="outlined"
 77              sx={{color: 'white', borderColor: 'white'}}
 78            />
 79          )}
 80          {!isMobile && <LinkedEventSwitch />}
 81        </Box>
 82        <>
 83          <IconButton
 84            sx={{marginRight: 0}}
 85            color="inherit"
 86            edge="end"
 87            id="ShareBtn"
 88            onClick={() =>
 89              share({
 90                title: `Caroster ${event.name}`,
 91              })
 92            }
 93            size="large"
 94          >
 95            <Icon>share</Icon>
 96          </IconButton>
 97          {connected && <DrawerNotification />}
 98          <IconButton
 99            color="inherit"
100            edge="end"
101            id="MenuMoreInfo"
102            onClick={e => setAnchorEl(e.currentTarget)}
103            size="large"
104          >
105            <UserIcon />
106          </IconButton>
107          <GenericMenu
108            anchorEl={anchorEl}
109            setAnchorEl={setAnchorEl}
110            actions={menuActions}
111          />
112        </>
113      </Toolbar>
114      {isMobile && <LinkedEventSwitch />}
115    </AppBar>
116  );
117};
118
119export default EventBar;