1import {Button, FormControl, TextField} from '@mui/material';
 2import InputAdornment from '@mui/material/InputAdornment';
 3import Stack from '@mui/material/Stack';
 4import React, {useState} from 'react';
 5import PlaceInput from '../PlaceInput';
 6import {t} from 'i18next';
 7import {
 8  EventEntity,
 9  TripAlertEntity,
10  useSetTripAlertMutation,
11} from '../../generated/graphql';
12import useToastStore from '../../stores/useToastStore';
13
14interface Props {
15  event: EventEntity;
16  tripAlertEntity: TripAlertEntity;
17  disabled: boolean;
18}
19
20const AlertsForm = ({event, tripAlertEntity, disabled}: Props) => {
21  const [address, setAddress] = useState(
22    tripAlertEntity?.attributes.address || ''
23  );
24  const [longitude, setLongitude] = useState(
25    tripAlertEntity?.attributes.longitude || 0
26  );
27  const [latitude, setLatitude] = useState(
28    tripAlertEntity?.attributes.latitude || 0
29  );
30  const [radius, setRadius] = useState(tripAlertEntity?.attributes.radius || 0);
31  const handleRadiusChange = e => setRadius(Number(e.target.value));
32  const addToast = useToastStore(s => s.addToast);
33  const [setTripAlertMutation] = useSetTripAlertMutation();
34
35  const handleCreateTripAlert = async () => {
36    try {
37      await setTripAlertMutation({
38        variables: {
39          eventId: event.id,
40          enabled: !disabled,
41          latitude: address ? latitude : 0,
42          longitude: address ? longitude : 0,
43          address: address,
44          radius: radius,
45        },
46      });
47      addToast(t('alert.create'));
48    } catch (error) {
49      addToast(t('alert.errors.cant_create'));
50    }
51  };
52
53  return (
54    <Stack display="flex" direction="column" spacing={2}>
55      <FormControl>
56        <PlaceInput
57          label={t('alert.location.label')}
58          textFieldProps={{sx: {mt: 2}}}
59          place={address}
60          latitude={latitude}
61          longitude={longitude}
62          onSelect={({place, latitude, longitude}) => {
63            setAddress(place);
64            setLatitude(latitude);
65            setLongitude(longitude);
66          }}
67          disabled={disabled}
68        />
69      </FormControl>
70      <TextField
71        id="radius"
72        label={t('alert.radius.label')}
73        InputProps={{
74          endAdornment: <InputAdornment position="end">km</InputAdornment>,
75        }}
76        variant="standard"
77        defaultValue={radius}
78        disabled={disabled}
79        onChange={handleRadiusChange}
80      />
81      <Button
82        variant="contained"
83        color="primary"
84        fullWidth
85        onClick={handleCreateTripAlert}
86      >
87        {t('alert.button.label')}
88      </Button>
89    </Stack>
90  );
91};
92
93export default AlertsForm;