1import {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(
23    i => !i,
24    tripAlertEntity?.attributes.enabled || false
25  );
26
27  return (
28    <Container
29      maxWidth="sm"
30      sx={{mt: isMobile ? 15 : 11, mx: 0, px: isMobile ? 2 : 4}}
31    >
32      {!canSetAlert() && (
33        <Box sx={{width: '480px', maxWidth: '100%', position: 'relative'}}>
34          <LoginToAttend title={t('event.loginToSetAlert')} />
35        </Box>
36      )}
37      <Paper sx={{width: '480px', maxWidth: '100%', position: 'relative'}}>
38        <Box p={2}>
39          <AlertsHeader
40            event={event}
41            switchChecked={switchChecked}
42            handleToggle={handleToggle}
43            disabled={!canSetAlert()}
44          />
45          <Typography sx={{mt: 2}} variant="body2">
46            {t('alert.description')}
47          </Typography>
48          <AlertsForm
49            event={event}
50            disabled={!canSetAlert || !switchChecked}
51            tripAlertEntity={tripAlertEntity}
52          />
53        </Box>
54      </Paper>
55    </Container>
56  );
57};
58
59export default Alerts;