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    const e = connected ? user.email : email;
 38    const n = connected ? true : newsletter;
 39    addToEvent({name, email: e, newsletter: n});
 40    nextStep();
 41    return false;
 42  };
 43
 44  return (
 45    <form onSubmit={onNext}>
 46      <TextField
 47        label={t('event.creation.event_name')}
 48        fullWidth
 49        autoFocus
 50        margin="dense"
 51        value={name}
 52        onChange={e => setName(e.target.value)}
 53        id="NewEventName"
 54        name="name"
 55      />
 56      {!connected && (
 57        <>
 58          <TextField
 59            label={t('event.creation.creator_email')}
 60            fullWidth
 61            margin="dense"
 62            value={email}
 63            onChange={e => setEmail(e.target.value)}
 64            id="NewEventEmail"
 65            name="email"
 66            type="email"
 67          />
 68          <FormControlLabel
 69            className={classes.newsletter}
 70            label={t('event.creation.newsletter')}
 71            control={
 72              <Checkbox
 73                name="newsletter"
 74                color="primary"
 75                id="NewEventNewsletter"
 76                checked={newsletter}
 77                onChange={e => setNewsletter(e.target.checked)}
 78              />
 79            }
 80          />
 81        </>
 82      )}
 83      <Button
 84        className={classes.button}
 85        type="submit"
 86        variant="contained"
 87        color="secondary"
 88        fullWidth
 89        disabled={!canSubmit}
 90        aria-disabled={!canSubmit}
 91      >
 92        {t('event.creation.next')}
 93      </Button>
 94
 95      {!connected && (
 96        <div className={classes.addFromAccountSection}>
 97          <Typography variant="body1">
 98            {t('event.creation.addFromAccount.title')}
 99          </Typography>
100          <Typography variant="body2">
101            {t('event.creation.addFromAccount.subtitle')}
102          </Typography>
103          <CardActions className={classes.actions}>
104            <Button variant="text" href="/auth/register">
105              {t('event.creation.addFromAccount.actions.register')}
106            </Button>
107            <Button color="primary" href="/auth/login">
108              {t('event.creation.addFromAccount.actions.login')}
109            </Button>
110          </CardActions>
111        </div>
112      )}
113    </form>
114  );
115};
116
117const useStyles = makeStyles(theme => ({
118  button: {
119    marginTop: theme.spacing(2),
120  },
121  newsletter: {
122    marginTop: theme.spacing(2),
123  },
124  addFromAccountSection: {
125    marginTop: theme.spacing(8),
126    textAlign: 'center',
127  },
128  actions: {
129    marginTop: theme.spacing(1),
130    justifyContent: 'space-evenly',
131    textAlign: 'center',
132  },
133}));
134
135const isValidEmail = email =>
136  // eslint-disable-next-line
137  /^(([^<>()\[\]\\.,;:\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(
138    email
139  );
140
141export default Step1;