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