1import Link from 'next/link';
  2import AppBar from '@material-ui/core/AppBar';
  3import Toolbar from '@material-ui/core/Toolbar';
  4import Typography from '@material-ui/core/Typography';
  5import IconButton from '@material-ui/core/IconButton';
  6import Tooltip from '@material-ui/core/Tooltip';
  7import Icon from '@material-ui/core/Icon';
  8import {makeStyles} from '@material-ui/core/styles';
  9import {useState} from 'react';
 10import useProfile from '../../hooks/useProfile';
 11import useShare from '../../hooks/useShare';
 12import GenericMenu from '../GenericMenu';
 13import useActions from './useActions';
 14import UserIcon from './UserIcon';
 15
 16const EventBar = ({event, onAdd}) => {
 17  const {share} = useShare();
 18  const [anchorEl, setAnchorEl] = useState(null);
 19  const {profile, connected} = useProfile();
 20  const classes = useStyles();
 21  const menuActions = useActions({onAdd, eventId: event?.id});
 22  const appLink = connected ? '/dashboard' : `/e/${event.uuid}` || '';
 23  const userInfos = profile
 24    ? [{label: profile.username, id: 'Email'}, {divider: true}]
 25    : [];
 26
 27  return (
 28    <AppBar
 29      className={classes.appbar}
 30      color="primary"
 31      position="static"
 32      id="Menu"
 33    >
 34      <Toolbar>
 35        <div className={classes.name}>
 36          <Link href={appLink}>
 37            <img
 38              className={classes.logo}
 39              src="/assets/Logo_in_beta.svg"
 40              alt="Logo"
 41            />
 42          </Link>
 43          <Tooltip title={event.name || ''}>
 44            <Typography
 45              variant="h6"
 46              noWrap
 47              id="MenuHeaderTitle"
 48              className={classes.title}
 49            >
 50              {event.name}
 51            </Typography>
 52          </Tooltip>
 53        </div>
 54        <>
 55          <IconButton
 56            className={classes.shareIcon}
 57            color="inherit"
 58            edge="end"
 59            id="ShareBtn"
 60            onClick={() =>
 61              share({
 62                title: `Caroster ${event.name}`,
 63                url: `${window.location.href}`,
 64              })
 65            }
 66          >
 67            <Icon>share</Icon>
 68          </IconButton>
 69          {
 70            <GenericMenu
 71              anchorEl={anchorEl}
 72              setAnchorEl={setAnchorEl}
 73              actions={[...userInfos, ...menuActions]}
 74            />
 75          }
 76          <IconButton
 77            color="inherit"
 78            edge="end"
 79            id="MenuMoreInfo"
 80            onClick={e => setAnchorEl(e.currentTarget)}
 81          >
 82            <UserIcon />
 83          </IconButton>
 84        </>
 85      </Toolbar>
 86    </AppBar>
 87  );
 88};
 89
 90const useStyles = makeStyles(theme => ({
 91  appbar: () => ({
 92    overflow: 'hidden',
 93    minHeight: theme.mixins.toolbar.minHeight,
 94    overflowY: 'hidden',
 95    transition: 'height 0.3s ease',
 96  }),
 97  logo: {
 98    marginRight: theme.spacing(2),
 99    width: 64,
100    height: 32,
101    cursor: 'pointer',
102  },
103  name: {
104    flexGrow: 1,
105    display: 'flex',
106    alignItems: 'center',
107  },
108  title: {
109    maxWidth: `calc(100vw - ${theme.spacing(30)}px)`,
110  },
111  iconButtons: {
112    margin: theme.spacing(0),
113  },
114  shareIcon: {
115    marginRight: 0,
116  },
117}));
118
119export default EventBar;