1import React from 'react';
 2import {Box, FormControlLabel, Typography} from '@mui/material';
 3import Toggle from '../../components/Toggle/index';
 4import {useTranslation} from 'next-i18next';
 5import {EventEntity} from '../../generated/graphql';
 6import useCreateTripAlert from './useCreateTripAlert';
 7
 8interface Props {
 9  event: EventEntity;
10  switchChecked: boolean;
11  disabled: boolean;
12  handleToggle: () => void;
13}
14
15const AlertsHeader = ({
16  event,
17  switchChecked,
18  disabled,
19  handleToggle,
20}: Props) => {
21  const {t} = useTranslation();
22  const handleCreateTripAlert = useCreateTripAlert();
23
24  const eventId = event.id;
25
26  const handleToggleClick = async () => {
27    if (!disabled) {
28      await handleCreateTripAlert({
29        eventId,
30        enabled: !switchChecked,
31      });
32      handleToggle();
33    }
34  };
35
36  return (
37    <Box display="flex" alignItems="center" justifyContent="space-between">
38      <Typography variant="h5">{t('alert.title')}</Typography>
39      <FormControlLabel
40        control={
41          <Toggle
42            activate={handleToggleClick}
43            checked={switchChecked}
44            disabled={disabled}
45          />
46        }
47        label=""
48        sx={{m: 0}}
49      />
50    </Box>
51  );
52};
53
54export default AlertsHeader;