1import React, {useState, useEffect, useMemo} from 'react';
  2import {makeStyles} from '@material-ui/core/styles';
  3import TextField from '@material-ui/core/TextField';
  4import Button from '@material-ui/core/Button';
  5import Checkbox from '@material-ui/core/Checkbox';
  6import FormControlLabel from '@material-ui/core/FormControlLabel';
  7import {useTranslation} from 'react-i18next';
  8import useDebounce from '../../hooks/useDebounce';
  9import useProfile from '../../hooks/useProfile';
 10
 11const isValidEmail = email =>
 12  // eslint-disable-next-line
 13  /^(([^<>()\[\]\\.,;:\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(
 14    email
 15  );
 16
 17const Step1 = ({nextStep, event, addToEvent}) => {
 18  const classes = useStyles();
 19  const {t} = useTranslation();
 20  const {connected, user} = useProfile();
 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 connected ? n : n && e;
 37  }, [name, email, emailIsValid, connected]);
 38
 39  const onNext = event => {
 40    if (event.preventDefault) event.preventDefault();
 41    const e = connected ? user.email : email;
 42    const n = connected ? true : newsletter;
 43    addToEvent({name, email: e, newsletter: n});
 44    nextStep();
 45    return false;
 46  };
 47
 48  return (
 49    <form onSubmit={onNext}>
 50      <TextField
 51        label={t('event.creation.event_name')}
 52        fullWidth
 53        autoFocus
 54        margin="dense"
 55        value={name}
 56        onChange={e => setName(e.target.value)}
 57        id="NewEventName"
 58        name="name"
 59      />
 60      {!connected && (
 61        <TextField
 62          label={t('event.creation.creator_email')}
 63          fullWidth
 64          margin="dense"
 65          value={email}
 66          onChange={e => setEmail(e.target.value)}
 67          id="NewEventEmail"
 68          name="email"
 69          type="email"
 70        />
 71      )}
 72      {!connected && (
 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      <Button
 88        className={classes.button}
 89        type="submit"
 90        variant="contained"
 91        color="secondary"
 92        fullWidth
 93        disabled={!canSubmit}
 94        aria-disabled={!canSubmit}
 95      >
 96        {t('event.creation.next')}
 97      </Button>
 98    </form>
 99  );
100};
101
102const useStyles = makeStyles(theme => ({
103  button: {
104    marginTop: theme.spacing(2),
105  },
106  newsletter: {
107    marginTop: theme.spacing(2),
108  },
109}));
110
111export default Step1;