1import {useState} from 'react';
  2import moment from 'moment';
  3import TextField from '@mui/material/TextField';
  4import Button from '@mui/material/Button';
  5import CircularProgress from '@mui/material/CircularProgress';
  6import Box from '@mui/material/Box';
  7import {useTheme} from '@mui/material/styles';
  8import {useRouter} from 'next/router';
  9import {DatePicker} from '@mui/x-date-pickers/DatePicker';
 10import {useTranslation} from 'react-i18next';
 11import useToastStore from '../../stores/useToastStore';
 12import AddressAutofill from '../AddressAutofill';
 13
 14const Step2 = ({event, addToEvent, createEvent}) => {
 15  const {t} = useTranslation();
 16  const theme = useTheme();
 17  const router = useRouter();
 18  const addToast = useToastStore(s => s.addToast);
 19
 20  // States
 21  const [date, setDate] = useState(null);
 22  const [address, setAddress] = useState(event.address ?? '');
 23  const [longitude, setLongitude] = useState(event.longitude);
 24  const [latitude, setLatitude] = useState(event.latitude);
 25  const [description, setDescription] = useState(event.description ?? '');
 26  const [loading, setLoading] = useState(false);
 27
 28  const onCreate = async evt => {
 29    if (evt.preventDefault) evt.preventDefault();
 30    if (loading) return;
 31    setLoading(true);
 32    const eventData = {
 33      date: !date ? null : moment(date).format('YYYY-MM-DD'),
 34      address,
 35      longitude,
 36      latitude,
 37      description,
 38    };
 39    addToEvent(eventData);
 40    const result = await createEvent(eventData);
 41    if (!result) addToast(t('event.errors.cant_create'));
 42    else router.push(`/e/${result.uuid}`);
 43    setLoading(false);
 44    return;
 45  };
 46
 47  return (
 48    <Box component="form" onSubmit={onCreate}>
 49      <DatePicker
 50        slotProps={{textField: {fullWidth: true, variant: 'standard'}}}
 51        format="DD/MM/YYYY"
 52        label={t('event.creation.date')}
 53        value={date}
 54        onChange={setDate}
 55      />
 56      <AddressAutofill
 57        label={t('event.creation.address')}
 58        textFieldProps={{sx: {mt: 2}}}
 59        address={address}
 60        onSelect={({location, address}) => {
 61          setAddress(address);
 62          setLatitude(location[1]);
 63          setLongitude(location[0]);
 64        }}
 65      />
 66      <TextField
 67        label={t('event.creation.description')}
 68        fullWidth
 69        multiline
 70        sx={{mt: 2}}
 71        variant="standard"
 72        maxRows={4}
 73        inputProps={{maxLength: 250}}
 74        helperText={
 75          description.length === 0
 76            ? t('event.creation.description_helper')
 77            : `${description.length}/250`
 78        }
 79        value={description}
 80        onChange={e => setDescription(e.target.value)}
 81        name="address"
 82      />
 83      <Button
 84        disabled={loading}
 85        sx={{marginTop: theme.spacing(2)}}
 86        variant="contained"
 87        color="primary"
 88        fullWidth
 89        type="submit"
 90        id="NewEventSubmit"
 91      >
 92        {loading ? (
 93          <CircularProgress size={20} color="primary" />
 94        ) : (
 95          t('generic.create')
 96        )}
 97      </Button>
 98    </Box>
 99  );
100};
101
102export default Step2;