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    addToEvent({name, email: e, newsletter});
 43    nextStep();
 44    return false;
 45  };
 46
 47  return (
 48    <form onSubmit={onNext}>
 49      <TextField
 50        className={classes.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          className={classes.textField}
 63          label={t('event.creation.creator_email')}
 64          fullWidth
 65          margin="dense"
 66          value={email}
 67          onChange={e => setEmail(e.target.value)}
 68          id="NewEventEmail"
 69          name="email"
 70          type="email"
 71        />
 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      <Button
 87        className={classes.button}
 88        type="submit"
 89        variant="contained"
 90        color="secondary"
 91        fullWidth
 92        disabled={!canSubmit}
 93        aria-disabled={!canSubmit}
 94      >
 95        {t('event.creation.next')}
 96      </Button>
 97    </form>
 98  );
 99};
100
101const useStyles = makeStyles(theme => ({
102  textField: {},
103  button: {
104    marginTop: theme.spacing(2),
105  },
106  newsletter: {
107    marginTop: theme.spacing(2),
108  },
109}));
110
111export default Step1;