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