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