1import {forwardRef} from 'react';
 2import {styled} from '@mui/material/styles';
 3import {useRouter} from 'next/router';
 4import Dialog from '@mui/material/Dialog';
 5import DialogTitle from '@mui/material/DialogTitle';
 6import DialogActions from '@mui/material/DialogActions';
 7import DialogContent from '@mui/material/DialogContent';
 8import DialogContentText from '@mui/material/DialogContentText';
 9import Icon from '@mui/material/Icon';
10import Slide from '@mui/material/Slide';
11import Button from '@mui/material/Button';
12import IconButton from '@mui/material/IconButton';
13import {useTranslation} from 'next-i18next';
14import useAddToEvents from '../../hooks/useAddToEvents';
15
16const PREFIX = 'AddToMyEventDialog';
17
18const classes = {
19  close: `${PREFIX}-close`,
20};
21
22const StyledSlide = styled(Slide)(({theme}) => ({
23  [`& .${classes.close}`]: {
24    position: 'absolute',
25    top: theme.spacing(1),
26    right: theme.spacing(0.5),
27  },
28}));
29
30const AddToMyEventDialog = ({event, open, onClose}) => {
31  const {t} = useTranslation();
32  const router = useRouter();
33
34  const {addToEvent} = useAddToEvents();
35
36  const onRedirect = path => {
37    addToEvent(event.id);
38    router.push(path);
39  };
40
41  if (!event) return null;
42
43  return (
44    <Dialog open={open} TransitionComponent={Transition} onClose={onClose}>
45      <IconButton onClick={onClose} className={classes.close} size="large">
46        <Icon>close</Icon>
47      </IconButton>
48      <DialogTitle>
49        {t('event.add_to_my_events.title', {eventName: event.name})}
50      </DialogTitle>
51      <DialogContent>
52        <DialogContentText
53          dangerouslySetInnerHTML={{
54            __html: t('event.add_to_my_events.text_html', {
55              eventName: event.name,
56            }),
57          }}
58        />
59      </DialogContent>
60      <DialogActions>
61        <Button
62          id="AddToMyEventLogin"
63          onClick={() => onRedirect(`/auth/login`)}
64        >
65          {t('event.add_to_my_events.login')}
66        </Button>
67        <Button
68          id="AddToMyEventRegister"
69          onClick={() => onRedirect(`/auth/register`)}
70          color="primary"
71        >
72          {t('event.add_to_my_events.register')}
73        </Button>
74      </DialogActions>
75    </Dialog>
76  );
77};
78
79const Transition = forwardRef(function Transition(props, ref) {
80  return <StyledSlide direction="up" ref={ref} {...props} />;
81});
82
83export default AddToMyEventDialog;