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    await handleCreateTripAlert({
27      eventId,
28      enabled: !disabled,
29    });
30    handleToggle();
31  };
32
33  return (
34    <Box display="flex" alignItems="center" justifyContent="space-between">
35      <Typography variant="h5">{t('alert.title')}</Typography>
36      <FormControlLabel
37        control={
38          <Toggle activate={handleToggleClick} checked={switchChecked} />
39        }
40        label=""
41        sx={{m: 0}}
42      />
43    </Box>
44  );
45};
46
47export default AlertsHeader;