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 PlaceInput from '../PlaceInput';
 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      <PlaceInput
 57        label={t('event.creation.address')}
 58        textFieldProps={{sx: {mt: 2}}}
 59        place={address}
 60        latitude={event.latitude}
 61        longitude={event.longitude}
 62        onSelect={({place, latitude, longitude}) => {
 63            setAddress(place);
 64            setLatitude(latitude);
 65            setLongitude(longitude);
 66        }}
 67      />
 68      <TextField
 69        label={t('event.creation.description')}
 70        fullWidth
 71        multiline
 72        sx={{mt: 2}}
 73        variant="standard"
 74        maxRows={4}
 75        inputProps={{maxLength: 250}}
 76        helperText={
 77          description.length === 0
 78            ? t('event.creation.description_helper')
 79            : `${description.length}/250`
 80        }
 81        value={description}
 82        onChange={e => setDescription(e.target.value)}
 83        name="address"
 84      />
 85      <Button
 86        disabled={loading}
 87        sx={{marginTop: theme.spacing(2)}}
 88        variant="contained"
 89        color="primary"
 90        fullWidth
 91        type="submit"
 92        id="NewEventSubmit"
 93      >
 94        {loading ? (
 95          <CircularProgress size={20} color="primary" />
 96        ) : (
 97          t('generic.create')
 98        )}
 99      </Button>
100    </Box>
101  );
102};
103
104export default Step2;