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