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