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 Avatar from '@material-ui/core/Avatar';
  8import Icon from '@material-ui/core/Icon';
  9import {makeStyles} from '@material-ui/core/styles';
 10import {useState} from 'react';
 11import {useRouter} from 'next/router';
 12import {useTranslation} from 'react-i18next';
 13import useAuthStore from '../../stores/useAuthStore';
 14import useProfile from '../../hooks/useProfile';
 15import useShare from '../../hooks/useShare';
 16import GenericMenu from '../GenericMenu';
 17
 18const EventBar = ({event, onAdd}) => {
 19  const {t} = useTranslation();
 20  const router = useRouter();
 21  const {share} = useShare();
 22  const [anchorEl, setAnchorEl] = useState(null);
 23  const token = useAuthStore(s => s.token);
 24  const {user} = useProfile();
 25  const classes = useStyles();
 26
 27  const signUp = () =>
 28    router.push({
 29      pathname: '/auth/register',
 30      state: {event: event?.id},
 31    });
 32  const signIn = () => router.push('/auth/login');
 33  const goToDashboard = () => router.push('/dashboard');
 34  const goProfile = () => router.push('/profile');
 35
 36  const noUserMenuActions = [
 37    {
 38      label: t('event.actions.add_to_my_events'),
 39      onClick: () => {
 40        onAdd(true);
 41      },
 42      id: 'AddToMyEventsTab',
 43    },
 44    {divider: true},
 45    {
 46      label: t('menu.login'),
 47      onClick: signIn,
 48      id: 'SignInTab',
 49    },
 50    {
 51      label: t('menu.register'),
 52      onClick: signUp,
 53      id: 'SignUpTab',
 54    },
 55    {divider: true},
 56  ];
 57
 58  const loggedMenuActions = [
 59    {
 60      label: t('menu.dashboard'),
 61      onClick: goToDashboard,
 62      id: 'GoToDashboardTab',
 63    },
 64    {
 65      label: t('menu.profile'),
 66      onClick: goProfile,
 67      id: 'ProfileTab',
 68    },
 69    {divider: true},
 70  ];
 71
 72  const menuActions = token ? loggedMenuActions : noUserMenuActions;
 73  const userInfos = user
 74    ? [{label: user.username, id: 'Email'}, {divider: true}]
 75    : [];
 76
 77  const appLink = user ? '/dashboard' : `/e/${event.uuid}` || '';
 78
 79  const UserIcon = user ? (
 80    <Avatar className={classes.avatar}>
 81      {`${user.username[0]}`.toUpperCase()}
 82    </Avatar>
 83  ) : (
 84    <Icon>more_vert</Icon>
 85  );
 86
 87  return (
 88    <AppBar
 89      className={classes.appbar}
 90      color="primary"
 91      position="static"
 92      id="Menu"
 93    >
 94      <Toolbar>
 95        <div className={classes.name}>
 96          <Link href={appLink}>
 97            <img
 98              className={classes.logo}
 99              src="/assets/Logo_in_beta.svg"
100              alt="Logo"
101            />
102          </Link>
103          <Tooltip title={event.name || ''}>
104            <Typography
105              variant="h6"
106              noWrap
107              id="MenuHeaderTitle"
108              className={classes.title}
109            >
110              {event.name}
111            </Typography>
112          </Tooltip>
113        </div>
114        <>
115          <IconButton
116            className={classes.shareIcon}
117            color="inherit"
118            edge="end"
119            id="ShareBtn"
120            onClick={() =>
121              share({
122                title: `Caroster ${event.name}`,
123                url: `${window.location.href}`,
124              })
125            }
126          >
127            <Icon>share</Icon>
128          </IconButton>
129          {
130            <GenericMenu
131              anchorEl={anchorEl}
132              setAnchorEl={setAnchorEl}
133              actions={[...userInfos, ...menuActions]}
134            />
135          }
136          <IconButton
137            color="inherit"
138            edge="end"
139            id="MenuMoreInfo"
140            onClick={e => setAnchorEl(e.currentTarget)}
141          >
142            {UserIcon}
143          </IconButton>
144        </>
145      </Toolbar>
146    </AppBar>
147  );
148};
149
150const useStyles = makeStyles(theme => ({
151  appbar: () => ({
152    overflow: 'hidden',
153    minHeight: theme.mixins.toolbar.minHeight,
154    overflowY: 'hidden',
155    transition: 'height 0.3s ease',
156  }),
157  logo: {
158    marginRight: theme.spacing(2),
159    width: 64,
160    height: 32,
161    cursor: 'pointer',
162  },
163  name: {
164    flexGrow: 1,
165    display: 'flex',
166    alignItems: 'center',
167  },
168  title: {
169    maxWidth: `calc(100vw - ${theme.spacing(30)}px)`,
170  },
171  iconButtons: {
172    margin: theme.spacing(0),
173  },
174  avatar: {
175    width: theme.spacing(3),
176    height: theme.spacing(3),
177    fontSize: 16,
178  },
179  shareIcon: {
180    marginRight: 0,
181  },
182}));
183
184export default EventBar;