1import {Button, ButtonGroup, useMediaQuery} from '@mui/material';
 2import {useTranslation} from 'next-i18next';
 3import useEventStore from '../../stores/useEventStore';
 4import Link from 'next/link';
 5import {useRouter} from 'next/router';
 6import theme from '../../theme';
 7
 8type Props = {};
 9
10const LinkedEventSwitch = (props: Props) => {
11  const {t} = useTranslation();
12  const router = useRouter();
13  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
14  const loadedEvent = useEventStore(s => s.event);
15  const linkedEvent = loadedEvent?.linkedEvent?.data?.attributes;
16
17  if (!loadedEvent || !linkedEvent) return null;
18
19  const goEvent = loadedEvent.isReturnEvent ? linkedEvent : loadedEvent;
20  const returnEvent = loadedEvent.isReturnEvent ? loadedEvent : linkedEvent;
21
22  return (
23    <ButtonGroup variant="contained" fullWidth={isMobile}>
24      <Link
25        href={router.asPath.replace(loadedEvent.uuid, goEvent.uuid)}
26        style={{width: isMobile && '100%'}}
27      >
28        <Button
29          color={loadedEvent.isReturnEvent ? 'inherit' : 'primary'}
30          sx={{
31            color: loadedEvent.isReturnEvent
32              ? 'rgba(0, 0, 0, 0.87)'
33              : 'rgba(255, 255, 255, 0.87)',
34          }}
35        >
36          {t`event.linked.goEvent`} ({goEvent.travels?.data?.length || 0})
37        </Button>
38      </Link>
39      <Link
40        href={router.asPath.replace(loadedEvent.uuid, returnEvent.uuid)}
41        style={{width: isMobile && '100%'}}
42      >
43        <Button
44          color={!loadedEvent.isReturnEvent ? 'inherit' : 'primary'}
45          sx={{
46            color: !loadedEvent.isReturnEvent
47              ? 'rgba(0, 0, 0, 0.87)'
48              : 'rgba(255, 255, 255, 0.87)',
49          }}
50        >
51          {t`event.linked.returnEvent`} (
52          {returnEvent?.travels?.data?.length || 0})
53        </Button>
54      </Link>
55    </ButtonGroup>
56  );
57};
58
59export default LinkedEventSwitch;