1import pageUtils from '../../lib/pageUtils';
  2import Layout from '../../layouts/EventCreation';
  3import {
  4  Button,
  5  CardActions,
  6  Checkbox,
  7  FormControlLabel,
  8  Paper,
  9  Stack,
 10  TextField,
 11} from '@mui/material';
 12import useEventCreationStore from '../../stores/useEventCreationStore';
 13import {useTranslation} from 'next-i18next';
 14import {useSession} from 'next-auth/react';
 15import {useMemo} from 'react';
 16import {isValidEmail} from '../../lib/formValidation';
 17import NextLink from 'next/link';
 18import Logo from '../../components/Logo';
 19
 20interface Props {
 21  announcement?: string;
 22}
 23
 24const NewEvent = (props: Props) => {
 25  const {t} = useTranslation();
 26  const session = useSession();
 27  const isAuthenticated = session.status === 'authenticated';
 28  const event = useEventCreationStore(s => s.event);
 29  const setField = useEventCreationStore(s => s.setField);
 30
 31  const canSubmit = useMemo(() => {
 32    const nameIsOk = event.name?.length > 0;
 33    const emailIsOk = event.email?.length > 0 && isValidEmail(event.email);
 34    return isAuthenticated ? nameIsOk : nameIsOk && emailIsOk;
 35  }, [event, , isAuthenticated]);
 36
 37  return (
 38    <Layout {...props}>
 39      <Paper
 40        sx={{
 41          p: 2,
 42          width: '480px',
 43          maxWidth: '100%',
 44          display: 'block',
 45          margin: '0 auto',
 46        }}
 47      >
 48        <Logo />
 49        <Stack spacing={2}>
 50          <TextField
 51            label={t('event.creation.name')}
 52            fullWidth
 53            autoFocus
 54            margin="dense"
 55            variant="standard"
 56            value={event.name}
 57            onChange={e => setField('name', e.target.value)}
 58            id="NewEventName"
 59            name="name"
 60          />
 61          {!isAuthenticated && (
 62            <>
 63              <TextField
 64                label={t('event.creation.creator_email')}
 65                fullWidth
 66                variant="standard"
 67                value={event.email}
 68                onChange={e => setField('email', e.target.value)}
 69                name="email"
 70                type="email"
 71                id="NewEventEmail"
 72              />
 73              <FormControlLabel
 74                label={t('event.creation.newsletter')}
 75                control={
 76                  <Checkbox
 77                    name="newsletter"
 78                    color="primary"
 79                    id="NewEventNewsletter"
 80                    checked={event.newsletter}
 81                    onChange={e => setField('newsletter', e.target.checked)}
 82                  />
 83                }
 84              />
 85            </>
 86          )}
 87          <NextLink href="/new/details" passHref>
 88            <Button
 89              fullWidth
 90              variant="contained"
 91              color="primary"
 92              disabled={!canSubmit}
 93              aria-disabled={!canSubmit}
 94            >
 95              {t('event.creation.next')}
 96            </Button>
 97          </NextLink>
 98          {!isAuthenticated && (
 99            <CardActions
100              sx={{
101                justifyContent: 'space-evenly',
102                textAlign: 'center',
103              }}
104            >
105              <NextLink href="/auth/login" passHref>
106                <Button color="primary">
107                  {t('event.creation.addFromAccount.actions.login')}
108                </Button>
109              </NextLink>
110            </CardActions>
111          )}
112        </Stack>
113      </Paper>
114    </Layout>
115  );
116};
117
118export const getServerSideProps = pageUtils.getServerSideProps();
119
120export default NewEvent;