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';
 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
 27  return (
 28    <AppBar
 29      sx={{
 30        top: 0,
 31        right: 0,
 32        width: '100%',
 33        overflow: 'hidden',
 34        minHeight: theme.mixins.toolbar.minHeight,
 35        transition: 'height 0.3s ease',
 36        backgroundColor: 'transparent',
 37        backgroundImage: `linear-gradient(${theme.palette.background.grey} 0%, rgba(0,0,0,0) 90%)`,
 38      }}
 39      position="absolute"
 40      elevation={0}
 41      id="Menu"
 42    >
 43      <Toolbar>
 44        <Box
 45          flexGrow={1}
 46          display="flex"
 47          justifyContent="space-start"
 48          alignItems="center"
 49          pr={1}
 50          gap={1}
 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(28)})`}}
 67            >
 68              {title || event.name}
 69            </Typography>
 70          </Tooltip>
 71          {isCarosterPlusEvent && (
 72            <Chip
 73              label="Plus"
 74              size="small"
 75              variant="outlined"
 76              sx={{color: 'white', borderColor: 'white'}}
 77            />
 78          )}
 79          <LinkedEventSwitch />
 80        </Box>
 81        <>
 82          <IconButton
 83            sx={{marginRight: 0}}
 84            color="inherit"
 85            edge="end"
 86            id="ShareBtn"
 87            onClick={() =>
 88              share({
 89                title: `Caroster ${event.name}`,
 90              })
 91            }
 92            size="large"
 93          >
 94            <Icon>share</Icon>
 95          </IconButton>
 96          {connected && <DrawerNotification />}
 97          <IconButton
 98            color="inherit"
 99            edge="end"
100            id="MenuMoreInfo"
101            onClick={e => setAnchorEl(e.currentTarget)}
102            size="large"
103          >
104            <UserIcon />
105          </IconButton>
106          <GenericMenu
107            anchorEl={anchorEl}
108            setAnchorEl={setAnchorEl}
109            actions={menuActions}
110          />
111        </>
112      </Toolbar>
113    </AppBar>
114  );
115};
116
117export default EventBar;