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 = event => {
 45    if (event.preventDefault) event.preventDefault();
 46    addToEvent({name, email});
 47    nextStep();
 48    return false;
 49  };
 50
 51  return (
 52    <>
 53      <Paper {...props}>
 54        <form onSubmit={onNext}>
 55          <TextField
 56            className={classes.textField}
 57            label={t('event.creation.event_name')}
 58            fullWidth
 59            autoFocus
 60            margin="dense"
 61            value={name}
 62            onChange={e => setName(e.target.value)}
 63            id="NewEventName"
 64            name="name"
 65          />
 66          <TextField
 67            className={classes.textField}
 68            label={t('event.creation.creator_email')}
 69            fullWidth
 70            margin="dense"
 71            value={email}
 72            onChange={e => setEmail(e.target.value)}
 73            id="NewEventEmail"
 74            name="email"
 75            type="email"
 76          />
 77          <div className={classes.tos}>
 78            <Checkbox
 79              name="tos"
 80              id="NewEventTos"
 81              checked={tos}
 82              onChange={e => setTos(e.target.checked)}
 83            />
 84            <Typography
 85              component="a"
 86              role="button"
 87              variant="caption"
 88              onClick={toggleTos}
 89              tabIndex="0"
 90              onKeyPress={({charCode}) => {
 91                if (charCode && (charCode === 32 || charCode === 13))
 92                  toggleTos();
 93              }}
 94            >
 95              {t('event.creation.tos')}
 96            </Typography>
 97          </div>
 98          <Button
 99            className={classes.button}
100            type="submit"
101            variant="contained"
102            color="secondary"
103            fullWidth
104            disabled={!canSubmit}
105            aria-disabled={!canSubmit}
106          >
107            {t('event.creation.next')}
108          </Button>
109        </form>
110      </Paper>
111      <TosDialog open={showTos} toggle={toggleTos} />
112    </>
113  );
114};
115
116const useStyles = makeStyles(theme => ({
117  textField: {},
118  button: {
119    marginTop: theme.spacing(2),
120  },
121  tos: {
122    cursor: 'pointer',
123    marginTop: theme.spacing(2),
124    display: 'flex',
125    alignItems: 'center',
126    marginLeft: '-11px',
127  },
128}));
129
130export default Step1;