1import pageUtils from '../../lib/pageUtils';
 2import Layout from '../../layouts/EventCreation';
 3import {DatePicker} from '@mui/x-date-pickers/DatePicker';
 4import {useTranslation} from 'react-i18next';
 5import useEventCreationStore from '../../stores/useEventCreationStore';
 6import {Button, Paper, Stack, TextField} from '@mui/material';
 7import PlaceInput from '../../containers/PlaceInput';
 8import NextLink from 'next/link';
 9import moment from 'moment';
10import Logo from '../../components/Logo';
11import {useEffect} from 'react';
12import {useRouter} from 'next/router';
13
14const NewEventDetails = () => {
15  const {t} = useTranslation();
16  const router = useRouter();
17  const event = useEventCreationStore(s => s.event);
18  const setField = useEventCreationStore(s => s.setField);
19
20  useEffect(() => {
21    if (!event.name) router.push('/new');
22  }, [event.name, router]);
23
24  return (
25    <Layout>
26      <Paper
27        sx={{
28          p: 2,
29          width: '480px',
30          maxWidth: '100%',
31          display: 'block',
32          margin: '0 auto',
33        }}
34      >
35        <Logo />
36        <Stack spacing={2}>
37          <DatePicker
38            slotProps={{textField: {fullWidth: true, variant: 'standard'}}}
39            format="DD/MM/YYYY"
40            label={t('event.creation.date')}
41            value={event.date ? moment(event.date, 'YYYY-MM-DD') : null}
42            onChange={value => setField('date', value?.format('YYYY-MM-DD'))}
43          />
44          <PlaceInput
45            label={t('event.fields.address')}
46            place={event.address}
47            latitude={event.latitude}
48            longitude={event.longitude}
49            onSelect={({place, latitude, longitude}) => {
50              setField('address', place);
51              setField('latitude', latitude);
52              setField('longitude', longitude);
53            }}
54          />
55          <TextField
56            fullWidth
57            multiline
58            maxRows={4}
59            variant="standard"
60            label={t('event.creation.description')}
61            slotProps={{htmlInput: {maxLength: 250}}}
62            helperText={
63              event.description?.length > 0
64                ? `${event.description.length}/250`
65                : t('event.creation.description_helper')
66            }
67            value={event.description}
68            onChange={e => setField('description', e.target.value)}
69            name="address"
70          />
71          <NextLink href="/new/type" passHref>
72            <Button
73              variant="contained"
74              color="primary"
75              fullWidth
76              type="submit"
77              id="NewEventSubmit"
78            >
79              {t('event.creation.next')}
80            </Button>
81          </NextLink>
82        </Stack>
83      </Paper>
84    </Layout>
85  );
86};
87
88export const getServerSideProps = pageUtils.getServerSideProps();
89
90export default NewEventDetails;