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