1import React, {useState} from 'react';
 2import {Box, FormControlLabel, Typography} from '@mui/material';
 3import Toggle from '../../components/Toggle/index';
 4import {t} from '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 handleCreateTripAlert = useCreateTripAlert();
22
23  const eventId = event.id;
24
25  const handleToggleClick = async () => {
26    if (!disabled) {
27      await handleCreateTripAlert({
28        eventId,
29        enabled: !switchChecked,
30      });
31      handleToggle();
32    }
33  };
34
35  return (
36    <Box display="flex" alignItems="center" justifyContent="space-between">
37      <Typography variant="h5">{t('alert.title')}</Typography>
38      <FormControlLabel
39        control={
40          <Toggle
41            activate={handleToggleClick}
42            checked={switchChecked}
43            disabled={disabled}
44          />
45        }
46        label=""
47        sx={{m: 0}}
48      />
49    </Box>
50  );
51};
52
53export default AlertsHeader;