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