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