1import React, {useState, useEffect, useMemo} from 'react';
  2import Typography from '@mui/material/Typography';
  3import TextField from '@mui/material/TextField';
  4import Button from '@mui/material/Button';
  5import Checkbox from '@mui/material/Checkbox';
  6import Box from '@mui/material/Box';
  7import FormControlLabel from '@mui/material/FormControlLabel';
  8import NextLink from 'next/link';
  9import CardActions from '@mui/material/CardActions';
 10import {useTheme} from '@mui/material/styles';
 11import {useTranslation} from 'react-i18next';
 12import {useSession} from 'next-auth/react';
 13import useDebounce from '../../hooks/useDebounce';
 14import {isValidEmail} from '../../lib/formValidation';
 15
 16const Step1 = ({nextStep, event, addToEvent}) => {
 17  const theme = useTheme();
 18  const {t} = useTranslation();
 19  const session = useSession();
 20  const user = session?.data?.user;
 21  const isAuthenticated = session.status === 'authenticated';
 22
 23  // States
 24  const [name, setName] = useState(event.name ?? '');
 25  const [email, setEmail] = useState(event.email ?? '');
 26  const [emailIsValid, setEmailIsValid] = useState(false);
 27  const [newsletter, setNewsletter] = useState(false);
 28  const debouncedEmail = useDebounce(email, 400);
 29
 30  useEffect(() => {
 31    setEmailIsValid(isValidEmail(debouncedEmail));
 32  }, [debouncedEmail]);
 33
 34  const canSubmit = useMemo(() => {
 35    const n = name.length > 0;
 36    const e = email.length > 0 && emailIsValid;
 37    return isAuthenticated ? n : n && e;
 38  }, [name, email, emailIsValid, isAuthenticated]);
 39
 40  const onNext = submitEvent => {
 41    if (submitEvent.preventDefault) submitEvent.preventDefault();
 42    addToEvent({
 43      name,
 44      email: isAuthenticated ? user.email : email,
 45      newsletter: isAuthenticated ? true : newsletter,
 46    });
 47    nextStep();
 48    return false;
 49  };
 50
 51  return (
 52    <Box component="form" onSubmit={onNext}>
 53      <TextField
 54        label={t('event.creation.name')}
 55        fullWidth
 56        autoFocus
 57        margin="dense"
 58        variant="standard"
 59        value={name}
 60        onChange={e => setName(e.target.value)}
 61        id="NewEventName"
 62        name="name"
 63      />
 64      {!isAuthenticated && (
 65        <>
 66          <TextField
 67            label={t('event.creation.creator_email')}
 68            fullWidth
 69            variant="standard"
 70            value={email}
 71            onChange={e => setEmail(e.target.value)}
 72            name="email"
 73            type="email"
 74            id="NewEventEmail"
 75          />
 76          <FormControlLabel
 77            sx={{marginTop: theme.spacing(2)}}
 78            label={t('event.creation.newsletter')}
 79            control={
 80              <Checkbox
 81                name="newsletter"
 82                color="primary"
 83                id="NewEventNewsletter"
 84                checked={newsletter}
 85                onChange={e => setNewsletter(e.target.checked)}
 86              />
 87            }
 88          />
 89        </>
 90      )}
 91      <Button
 92        sx={{marginTop: theme.spacing(2)}}
 93        type="submit"
 94        variant="contained"
 95        color="primary"
 96        fullWidth
 97        disabled={!canSubmit}
 98        aria-disabled={!canSubmit}
 99      >
100        {t('event.creation.next')}
101      </Button>
102
103      {!isAuthenticated && (
104        <Box sx={{marginTop: theme.spacing(8), textAlign: 'center'}}>
105          <Typography variant="body1">
106            {t('event.creation.addFromAccount.title')}
107          </Typography>
108          <Typography variant="body2">
109            {t('event.creation.addFromAccount.subtitle')}
110          </Typography>
111          <CardActions
112            sx={{
113              marginTop: theme.spacing(1),
114              justifyContent: 'space-evenly',
115              textAlign: 'center',
116            }}
117          >
118            <NextLink href="/auth/register" passHref>
119              <Button variant="text">
120                {t('event.creation.addFromAccount.actions.register')}
121              </Button>
122            </NextLink>
123            <NextLink href="/auth/login" passHref>
124              <Button color="primary">
125                {t('event.creation.addFromAccount.actions.login')}
126              </Button>
127            </NextLink>
128          </CardActions>
129        </Box>
130      )}
131    </Box>
132  );
133};
134
135export default Step1;