1import Box from '@mui/material/Box';
 2import Container from '@mui/material/Container';
 3import Paper from '@mui/material/Paper';
 4import useMediaQuery from '@mui/material/useMediaQuery';
 5import theme from '../../theme';
 6import AlertsHead from './AlertsHead';
 7import AlertsForm from './AlertsForm';
 8import {useReducer} from 'react';
 9import {EventEntity, TripAlertEntity} from '../../generated/graphql';
10
11interface Props {
12  event: EventEntity;
13  tripAlertEntity: TripAlertEntity;
14}
15
16const Alerts = ({event, tripAlertEntity}: Props) => {
17  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
18  const [switchChecked, handleToggle] = useReducer(
19    i => !i,
20    tripAlertEntity?.attributes.enabled || false
21  );
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          <AlertsHead handleToggle={handleToggle} checked={switchChecked} />
28          <AlertsForm
29            event={event}
30            disabled={!switchChecked}
31            tripAlertEntity={tripAlertEntity}
32          />
33        </Box>
34      </Paper>
35    </Container>
36  );
37};
38
39export default Alerts;