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
 88            href="/new/details"
 89            passHref
 90            tabIndex={canSubmit ? undefined : -1}
 91            style={{pointerEvents: canSubmit ? undefined : 'none'}}
 92            aria-disabled={!canSubmit}
 93          >
 94            <Button
 95              fullWidth
 96              variant="contained"
 97              color="primary"
 98              disabled={!canSubmit}
 99              aria-disabled={!canSubmit}
100            >
101              {t('event.creation.next')}
102            </Button>
103          </NextLink>
104          {!isAuthenticated && (
105            <CardActions
106              sx={{
107                justifyContent: 'space-evenly',
108                textAlign: 'center',
109              }}
110            >
111              <NextLink href="/auth/login" passHref>
112                <Button color="primary">
113                  {t('event.creation.addFromAccount.actions.login')}
114                </Button>
115              </NextLink>
116            </CardActions>
117          )}
118        </Stack>
119      </Paper>
120    </Layout>
121  );
122};
123
124export const getServerSideProps = pageUtils.getServerSideProps();
125
126export default NewEvent;