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