1import {useEffect, useReducer} from 'react';
 2import {Box, Container, Paper, Typography, useMediaQuery} from '@mui/material';
 3import {useTranslation} from 'next-i18next';
 4import theme from '../../theme';
 5import usePermissions from '../../hooks/usePermissions';
 6import LoginToAttend from '../LoginToAttend/LoginToAttend';
 7import AlertsHeader from './AlertsHead';
 8import AlertsForm from './AlertsForm';
 9import {EventEntity, TripAlertEntity} from '../../generated/graphql';
10
11interface Props {
12  event: EventEntity;
13  tripAlertEntity: TripAlertEntity;
14}
15
16const Alerts = ({event, tripAlertEntity}: Props) => {
17  const {
18    userPermissions: {canSetAlert},
19  } = usePermissions();
20  const {t} = useTranslation();
21  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
22  const [switchChecked, handleToggle] = useReducer(i => !i, false);
23
24  useEffect(() => {
25    if (tripAlertEntity?.attributes?.enabled && !switchChecked) handleToggle();
26    else if (!tripAlertEntity?.attributes?.enabled && switchChecked)
27      handleToggle();
28  }, [tripAlertEntity]);
29
30  return (
31    <Container
32      maxWidth="sm"
33      sx={{mt: isMobile ? 15 : 11, mx: 0, px: isMobile ? 2 : 4}}
34      key={tripAlertEntity?.attributes.address}
35    >
36      {!canSetAlert() && (
37        <Box sx={{width: '480px', maxWidth: '100%', position: 'relative'}}>
38          <LoginToAttend title={t('event.loginToSetAlert')} />
39        </Box>
40      )}
41      <Paper sx={{width: '480px', maxWidth: '100%', position: 'relative'}}>
42        <Box p={2}>
43          <AlertsHeader
44            event={event}
45            switchChecked={switchChecked}
46            handleToggle={handleToggle}
47            disabled={!canSetAlert()}
48          />
49          <Typography sx={{mt: 2}} variant="body2">
50            {t('alert.description')}
51          </Typography>
52          <AlertsForm
53            event={event}
54            disabled={!canSetAlert || !switchChecked}
55            tripAlertEntity={tripAlertEntity}
56          />
57        </Box>
58      </Paper>
59    </Container>
60  );
61};
62
63export default Alerts;