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