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