import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import axios from 'axios';
import Snackbar from '@material-ui/core/Snackbar';
import green from '@material-ui/core/colors/green';
import CloseIcon from '@material-ui/icons/Close';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import CircularProgress from '@material-ui/core/CircularProgress';

const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  margin: {
    margin: theme.spacing.unit,
  },
  textField: {
    flexBasis: 200,
  },
  icon: {
    marginRight: theme.spacing.unit,
  },
  success: {
    display: 'flex',
    alignItems: 'center',
  },
  snackBarColor: {
    background: green[600],
  },
  buttonProgress: {
    marginRight: 20,
  }
});

class Register extends Component {
  state = {
    open: false,
    firstName: '',
    lastName: '',
    username: '',
    email: '',
    password: '',
    matchingPassword: '',
    showPassword: false,
    showMatchingPassword: false,
    invalidUsernameText: '',
    invalidPasswordText: '',
    invalidEmailText: '',
    firstNameInvalid: false,
    lastNameInvalid: false,
    usernameInvalid: false,
    matchingPasswordInvalid: false,
    passwordInvalid: false,
    emailInvalid: false,
    registered: false,
    loading: false,
  };

  async onRegister() {
    let firstName = this.state.firstName;
    let lastName = this.state.lastName;
    let password = this.state.password;
    let email = this.state.email;
    let username = this.state.username;
    try {
      const response = await axios.post('http://localhost:5000/api/users/register', { firstName, lastName,
        password, email, username });
      if (!response.data.success) {
        if (response.data.errorType === "email") {
          this.setState({ emailInvalid: true, invalidEmailText: response.data.error, loading: false });
        } else {
          this.setState({ usernameInvalid: true, invalidUsernameText: response.data.error, loading: false });
        }
      } else {
        this.setState({ registered: true, open: false, firstName: '', lastName: '', email: '', password: '',
          matchingPassword: '', username: '', loading: false });
      }
    } catch (err) {
      console.log("Error registering user");
    }
  }

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  handleRegisteredClose = () => {
    this.setState({ registered: false })
  }

  handleRegister = () => {
    let userInvalidResults = this.checkUsernameInvalid(this.state.username);
    let usernameInvalid = userInvalidResults[0];
    let invalidUsernameText = userInvalidResults[1];
    let passwordInvalidResults = this.checkPasswordInvalid(this.state.password);
    let passwordInvalid = passwordInvalidResults[0];
    let invalidPasswordText = passwordInvalidResults[1];
    let matchingPasswordInvalid = this.checkMatchingPasswordInvalid(this.state.password, this.state.matchingPassword);
    let emailInvalidResults = this.checkEmailInvalid(this.state.email);
    let emailInvalid = emailInvalidResults[0];
    let invalidEmailText = emailInvalidResults[1];
    let firstNameInvalid = this.checkNameInvalid(this.state.firstName);
    let lastNameInvalid = this.checkNameInvalid(this.state.lastName);
    let loading = false;
    if (!usernameInvalid && !passwordInvalid && !matchingPasswordInvalid && !emailInvalid) {
      loading = true;
      this.onRegister();
    }
    this.setState({ usernameInvalid, invalidUsernameText, passwordInvalid, invalidPasswordText, matchingPasswordInvalid,
        emailInvalid, invalidEmailText, firstNameInvalid, lastNameInvalid, loading });
  }

  handleClickShowPassword = () => {
    this.setState(state => ({ showPassword: !this.state.showPassword }));
  };

  handleClickShowMatchingPassword = () => {
    this.setState(state => ({ showMatchingPassword: !this.state.showMatchingPassword }));
  };

  handleFirstNameChange = (e) => {
    this.setState({ firstName: e.target.value });
  };

  handleLastNameChange = (e) => {
    this.setState({ lastName: e.target.value });
  };

  handleUsernameChange = (e) => {
    this.setState({ username: e.target.value });
  };

  handleEmailChange = (e) => {
    this.setState({ email: e.target.value });
  };

  handlePasswordChange = (e) => {
    this.setState({ password: e.target.value });
  };

  handleMatchingPasswordChange = (e) => {
    this.setState({ matchingPassword: e.target.value });
  };

  checkNameInvalid(name) {
    return name==='';
  }

  checkUsernameInvalid(username) {
    if (username.length < 4) {
      return [true, 'Username must have at least 4 characters'];
    } else if (!/^([a-zA-Z])$/.test(username[0])) {
      return [true, 'Username must begin with a-z'];
    } else if (!/^([a-zA-Z][a-zA-Z0-9]{3,9})$/.test(username)) {
      return [true, 'Username must be alphanumeric and have no more than 10 characters'];
    }
    return [false, ''];
  };

  checkEmailInvalid(email) {
    if (!/^([a-zA-Z0-9.]+@[a-zA-Z0-9.]*dcu.ie)$/.test(email)) {
      return [true, "Must use a DCU email"];
    }
    return [false, ''];
  };

  checkPasswordInvalid(password) {
    if (password.length < 8) {
      return [true, 'Password must have at least 8 characters'];
    } else if (/^([a-zA-Z0-9]+)$/.test(password)) {
      return [true, 'Password must have at least 1 special character'];
    }
    return [false, ''];
  };

  checkMatchingPasswordInvalid(password, matchingPassword) {
    return !(password === matchingPassword);
  };

  render() {
    const { classes } = this.props;
    const Icon = CheckCircleIcon;
    if (this.state.registered) {
      return (
        <Snackbar
          className={classes.snackBarColor}
          color="green"
          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
          open={this.state.registered}
          ContentProps={{
            classes: {
              root: classes.snackBarColor
            }
          }}
          message={
          <span id="success" className={classes.success}>
            <Icon className={classes.icon} />
            Registration complete. Please go to your email to verify your account.
          </span>
          }
          action={[
            <IconButton
              key="close"
              aria-label="Close"
              color="inherit"
              onClick={this.handleRegisteredClose}
            >
              <CloseIcon />
            </IconButton>,
          ]}
        />
      );
    }
    return (
      <div>
        <Button color="secondary" onClick={this.handleOpen}>
          Register
        </Button>
        <Dialog
          open={this.state.open}
          onClose={this.handleClose}
        >
          <DialogTitle>Register</DialogTitle>
          <DialogContent>
            <div className={classes.root}>
              <TextField
                required
                disabled={this.state.loading}
                className={classNames(classes.margin, classes.textField)}
                error={this.state.firstNameInvalid}
                helperText={this.state.firstNameInvalid ? "Please enter a first name" : ""}
                onChange={this.handleFirstNameChange}
                value={this.state.firstName}
                margin="normal"
                id="firstName"
                label="First name"
                variant="outlined"
              />
              <TextField
                required
                disabled={this.state.loading}
                className={classNames(classes.margin, classes.textField)}
                error={this.state.lastNameInvalid}
                helperText={this.state.lastNameInvalid ? "Please enter a last name" : ""}
                onChange={this.handleLastNameChange}
                value={this.state.lastName}
                margin="normal"
                id="lastName"
                label="Last name"
                variant="outlined"
              />
              <TextField
                required
                disabled={this.state.loading}
                className={classNames(classes.margin, classes.textField)}
                error={this.state.usernameInvalid}
                helperText={this.state.usernameInvalid ? this.state.invalidUsernameText : ""}
                onChange={this.handleUsernameChange}
                value={this.state.username}
                margin="normal"
                id="username"
                label="Username"
                variant="outlined"
              />
              <TextField
                required
                disabled={this.state.loading}
                className={classNames(classes.margin, classes.textField)}
                error={this.state.emailInvalid}
                helperText={this.state.emailInvalid ? this.state.invalidEmailText : ""}
                onChange={this.handleEmailChange}
                value={this.state.email}
                margin="normal"
                id="email"
                label="Email Address"
                variant="outlined"
              />
              <TextField
                required
                disabled={this.state.loading}
                className={classNames(classes.margin, classes.textField)}
                error={this.state.passwordInvalid}
                helperText={this.state.passwordInvalid ? this.state.invalidPasswordText : ""}
                onChange={this.handlePasswordChange}
                value={this.state.password}
                margin="normal"
                id="password"
                label="Password"
                variant="outlined"
                type={this.state.showPassword ? 'text' : 'password'}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        aria-label="Toggle password visibility"
                        onClick={this.handleClickShowPassword}
                      >
                        {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />
              <TextField
                required
                disabled={this.state.loading}
                className={classNames(classes.margin, classes.textField)}
                error={this.state.matchingPasswordInvalid}
                helperText={this.state.matchingPasswordInvalid ? "Passwords don't match" : ""}
                onChange={this.handleMatchingPasswordChange}
                value={this.state.matchingPassword}
                margin="normal"
                id="verify_password"
                label="Verify Password"
                variant="outlined"
                type={this.state.showMatchingPassword ? 'text' : 'password'}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        aria-label="Toggle password visibility"
                        onClick={this.handleClickShowMatchingPassword}
                      >
                        {this.state.showMatchingPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />
            </div>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary" disabled={this.state.loading}>
              Cancel
            </Button>
            {!this.state.loading ?
              (<Button onClick={this.handleRegister} color="primary" disabled={this.state.loading}>
                Register
              </Button>) :
              <CircularProgress size={24} className={classes.buttonProgress} />
            }
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

Register.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Register);