1import pageUtils from '../../lib/pageUtils';
 2import Layout from '../../layouts/EventCreation';
 3import {DatePicker} from '@mui/x-date-pickers/DatePicker';
 4import {useTranslation} from 'next-i18next';
 5import useEventCreationStore from '../../stores/useEventCreationStore';
 6import {Paper, Stack, TextField} from '@mui/material';
 7import PlaceInput from '../../containers/PlaceInput';
 8import moment from 'moment';
 9import Logo from '../../components/Logo';
10import {useEffect} from 'react';
11import {useRouter} from 'next/router';
12import BasicAction from '../../containers/EventTypeCard/BasicAction';
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          <BasicAction />
72        </Stack>
73      </Paper>
74    </Layout>
75  );
76};
77
78export const getServerSideProps = pageUtils.getServerSideProps();
79
80export default NewEventDetails;