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 {Trans, 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          <Trans
54            i18nKey="event.add_to_my_events.text"
55            values={{eventName: event.name}}
56            components={{bold: <strong />}}
57          />
58        </DialogContentText>
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      </DialogActions>
68    </Dialog>
69  );
70};
71
72const Transition = forwardRef(function Transition(props, ref) {
73  return <StyledSlide direction="up" ref={ref} {...props} />;
74});
75
76export default AddToMyEventDialog;