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