1import React, {useState, useEffect, useReducer, 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 Typography from '@material-ui/core/Typography';
  6import Checkbox from '@material-ui/core/Checkbox';
  7import {useTranslation} from 'react-i18next';
  8import useDebounce from '../../hooks/useDebounce';
  9import Paper from '../../components/Paper';
 10import TosDialog from '../TosDialog';
 11
 12const isValidEmail = email =>
 13  // eslint-disable-next-line
 14  /^(([^<>()\[\]\\.,;:\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(
 15    email
 16  );
 17
 18const Step1 = ({
 19  nextStep,
 20  previousStep,
 21  createEvent,
 22  event,
 23  addToEvent,
 24  ...props
 25}) => {
 26  const classes = useStyles();
 27  const {t} = useTranslation();
 28
 29  // States
 30  const [name, setName] = useState(event.name ?? '');
 31  const [email, setEmail] = useState(event.email ?? '');
 32  const [emailIsValid, setEmailIsValid] = useState(false);
 33  const [tos, setTos] = useState(false);
 34  const [showTos, toggleTos] = useReducer(i => !i, false);
 35  const debouncedEmail = useDebounce(email, 400);
 36  const canSubmit = useMemo(
 37    () => name.length > 0 && email.length > 0 && emailIsValid && tos,
 38    [name, email, emailIsValid, tos]
 39  );
 40  useEffect(() => {
 41    setEmailIsValid(isValidEmail(debouncedEmail));
 42  }, [debouncedEmail]);
 43
 44  const onNext = () => {
 45    addToEvent({name, email});
 46    nextStep();
 47  };
 48
 49  return (
 50    <>
 51      <Paper {...props}>
 52        <form onSubmit={onNext}>
 53          <TextField
 54            className={classes.textField}
 55            label={t('event.creation.event_name')}
 56            fullWidth
 57            autoFocus
 58            margin="dense"
 59            value={name}
 60            onChange={e => setName(e.target.value)}
 61            id="NewEventName"
 62            name="name"
 63          />
 64          <TextField
 65            className={classes.textField}
 66            label={t('event.creation.creator_email')}
 67            fullWidth
 68            margin="dense"
 69            value={email}
 70            onChange={e => setEmail(e.target.value)}
 71            id="NewEventEmail"
 72            name="email"
 73            type="email"
 74          />
 75          <div className={classes.tos}>
 76            <Checkbox
 77              name="tos"
 78              id="NewEventTos"
 79              checked={tos}
 80              onChange={e => setTos(e.target.checked)}
 81            />
 82            <Typography
 83              component="a"
 84              role="button"
 85              variant="caption"
 86              onClick={toggleTos}
 87              tabIndex="0"
 88              onKeyPress={({charCode}) => {
 89                if (charCode && (charCode === 32 || charCode === 13))
 90                  toggleTos();
 91              }}
 92            >
 93              {t('event.creation.tos')}
 94            </Typography>
 95          </div>
 96          <Button
 97            className={classes.button}
 98            type="submit"
 99            variant="contained"
100            color="secondary"
101            fullWidth
102            disabled={!canSubmit}
103            aria-disabled={!canSubmit}
104          >
105            {t('event.creation.next')}
106          </Button>
107        </form>
108      </Paper>
109      <TosDialog open={showTos} toggle={toggleTos} />
110    </>
111  );
112};
113
114const useStyles = makeStyles(theme => ({
115  textField: {},
116  button: {
117    marginTop: theme.spacing(2),
118  },
119  tos: {
120    cursor: 'pointer',
121    marginTop: theme.spacing(2),
122    display: 'flex',
123    alignItems: 'center',
124    marginLeft: '-11px',
125  },
126}));
127
128export default Step1;