1import Link from 'next/link';
  2import Drawer from '@mui/material/Drawer';
  3import Box from '@mui/material/Box';
  4import {useTranslation} from 'next-i18next';
  5import {useRouter} from 'next/router';
  6import useProfile from '../../hooks/useProfile';
  7import DrawerMenuItem from './DrawerMenuItem';
  8import useEventStore from '../../stores/useEventStore';
  9import usePermissions from '../../hooks/usePermissions';
 10import theme from '../../theme';
 11
 12interface Props {
 13  eventUuid: string;
 14}
 15
 16const DrawerMenu = ({eventUuid}: Props) => {
 17  const {t} = useTranslation();
 18
 19  const event = useEventStore(s => s.event);
 20  const {connected} = useProfile();
 21  const appLink = connected ? '/dashboard' : `/e/${eventUuid}` || '';
 22  const isCarosterPlusEvent = event?.enabled_modules?.includes('caroster-plus');
 23
 24  const {
 25    userPermissions: {canSeeAdminWaitingList},
 26  } = usePermissions();
 27
 28  const router = useRouter();
 29  const {
 30    query: {uuid},
 31  } = router;
 32
 33  return (
 34    <Drawer
 35      variant="permanent"
 36      sx={{
 37        width: '240px',
 38
 39        [theme.breakpoints.down('md')]: {
 40          width: '100%',
 41          position: 'fixed',
 42          bottom: 0,
 43          zIndex: 1,
 44        },
 45
 46        '& .MuiDrawer-paper': {
 47          zIndex: theme.zIndex.appBar - 1,
 48          width: '239px',
 49          display: 'flex',
 50          flexDirection: 'column',
 51          boxSizing: 'border-box',
 52          left: 0,
 53          top: 0,
 54          color: 'white',
 55          overflowX: 'hidden',
 56          position: 'static',
 57
 58          [theme.breakpoints.down('md')]: {
 59            bottom: 0,
 60            top: 'auto',
 61            paddingTop: 0,
 62            height: '80px',
 63            width: '100%',
 64            flexDirection: 'row',
 65            boxShadow: '0px -3px 8px 0px rgba(0, 0, 0, 0.08)',
 66          },
 67        },
 68      }}
 69    >
 70      <Link href={appLink}>
 71        <Box
 72          sx={{
 73            margin: 3,
 74            width: 64,
 75            height: 32,
 76            cursor: 'pointer',
 77
 78            [theme.breakpoints.down('md')]: {
 79              display: 'none',
 80            },
 81          }}
 82        >
 83          <img src="/assets/logo.svg" alt="Logo" />
 84        </Box>
 85      </Link>
 86      <DrawerMenuItem
 87        title={t('drawer.travels')}
 88        onClick={() => {
 89          router.push(`/e/${uuid}`, null, {shallow: true});
 90        }}
 91        icon="directions_car"
 92        active={router.pathname === `/e/[uuid]`}
 93      />
 94      {isCarosterPlusEvent && connected && (
 95        <DrawerMenuItem
 96          title={t('drawer.alerts')}
 97          onClick={() =>
 98            router.push(`/e/${uuid}/alerts`, null, {shallow: true})
 99          }
100          icon="track_changes"
101          active={router.pathname === `/e/[uuid]/alerts`}
102        />
103      )}
104
105      {!isCarosterPlusEvent && (
106        <DrawerMenuItem
107          title={t('drawer.waitingList')}
108          onClick={() =>
109            router.push(`/e/${uuid}/waitingList`, null, {shallow: true})
110          }
111          icon="group"
112          active={
113            router.pathname === `/e/[uuid]/waitingList` ||
114            router.pathname === `/e/[uuid]/assign/[passengerId]`
115          }
116        />
117      )}
118
119      {isCarosterPlusEvent && canSeeAdminWaitingList() && (
120        <DrawerMenuItem
121          title={t('drawer.waitingList')}
122          onClick={() =>
123            router.push(`/e/${uuid}/adminWaitingList`, null, {shallow: true})
124          }
125          icon="group"
126          active={router.pathname === `/e/[uuid]/adminWaitingList`}
127        />
128      )}
129
130      <DrawerMenuItem
131        title={t('drawer.information')}
132        onClick={() => {
133          router.push(`/e/${uuid}/details`, null, {shallow: true});
134        }}
135        icon="info"
136        active={router.pathname === `/e/[uuid]/details`}
137      />
138      <DrawerMenuItem
139        title={t('drawer.options')}
140        onClick={() => {
141          router.push(`/e/${uuid}/options`, null, {shallow: true});
142        }}
143        icon="settings"
144        active={router.pathname === `/e/[uuid]/options`}
145      />
146    </Drawer>
147  );
148};
149
150export default DrawerMenu;