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