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