1import Link from 'next/link';
  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/material/styles';
 10import {useState} from 'react';
 11import useProfile from '../../hooks/useProfile';
 12import useShare from '../../hooks/useShare';
 13import GenericMenu from '../GenericMenu';
 14import useActions from './useActions';
 15import UserIcon from './UserIcon';
 16
 17const EventBar = ({event, onAdd}) => {
 18  const {share} = useShare();
 19  const theme = useTheme();
 20  const [anchorEl, setAnchorEl] = useState(null);
 21  const {connected} = useProfile();
 22
 23  const menuActions = useActions({onAdd, eventId: event?.id});
 24  const appLink = connected ? '/dashboard' : `/e/${event.uuid}` || '';
 25
 26  return (
 27    <AppBar
 28      sx={{
 29        overflow: 'hidden',
 30        minHeight: theme.mixins.toolbar.minHeight,
 31        overflowY: 'hidden',
 32        transition: 'height 0.3s ease',
 33        backgroundColor: '#242424',
 34        color: 'white',
 35      }}
 36      color="primary"
 37      position="static"
 38      id="Menu"
 39    >
 40      <Toolbar>
 41        <Box sx={{flexGrow: 1, display: 'flex', alignItems: 'center'}}>
 42          <Link href={appLink}>
 43            <Box
 44              sx={{
 45                marginRight: theme.spacing(2),
 46                width: 64,
 47                height: 32,
 48                cursor: 'pointer',
 49              }}
 50            >
 51              <img src="/assets/Logo_in_beta.svg" alt="Logo" />
 52            </Box>
 53          </Link>
 54          <Tooltip title={event.name || ''}>
 55            <Typography
 56              variant="h6"
 57              noWrap
 58              id="MenuHeaderTitle"
 59              sx={{maxWidth: `calc(100vw - ${theme.spacing(30)})`}}
 60            >
 61              {event.name}
 62            </Typography>
 63          </Tooltip>
 64        </Box>
 65        <>
 66          <IconButton
 67            sx={{marginRight: 0}}
 68            color="inherit"
 69            edge="end"
 70            id="ShareBtn"
 71            onClick={() =>
 72              share({
 73                title: `Caroster ${event.name}`,
 74                url: `${window.location.href}`,
 75              })
 76            }
 77            size="large"
 78          >
 79            <Icon>share</Icon>
 80          </IconButton>
 81          <GenericMenu
 82            anchorEl={anchorEl}
 83            setAnchorEl={setAnchorEl}
 84            actions={menuActions}
 85          />
 86          <IconButton
 87            color="inherit"
 88            edge="end"
 89            id="MenuMoreInfo"
 90            onClick={e => setAnchorEl(e.currentTarget)}
 91            size="large"
 92          >
 93            <UserIcon />
 94          </IconButton>
 95        </>
 96      </Toolbar>
 97    </AppBar>
 98  );
 99};
100
101export default EventBar;