import { signup } from '../../reducers/login';
import { useState } from 'react';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/styles';

const styles = (theme) => {};

const SignupPage = (props) => {
  //const { classes } = props;
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [visible, setVisible] = useState(false);
  const [error, setError] = useState(false);
  const checkSignup = () => {
    if (password !== confirmPassword) {
      setError(true);
    } else {
      setError(false);
    }
  };

  return (
    <Grid container alignItems='center' justify='center'>
      <Grid item alignItems='center' justify='center'>
        <form>
          <div>
            <Typography align='center' variant='h6' gutterBottom>
              Sign Up
            </Typography>
            <TextField
              autoComplete='new-email'
              label='Email'
              name='email'
              type='email'
              value={email}
              variant='outlined'
              fullWidth
              onChange={(event) => {
                return setEmail(event.target.value ?? '');
              }}
              onKeyPress={(event) => {
                if (event.key === 'Enter') {
                  checkSignup();
                  if (!error) {
                    props.signup(email, password);
                  }
                }
              }}
            />
            <div>
              <TextField
                autoComplete='new-password'
                label='Password'
                name='password'
                type={visible ? 'text' : 'password'}
                value={password}
                variant='outlined'
                fullWidth
                onChange={(event) => {
                  setPassword(event.target.value ?? '');
                }}
                onKeyPress={(event) => {
                  if (event.key === 'Enter') {
                    checkSignup();
                    if (!error) {
                      props.signup(email, password);
                    }
                  }
                }}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position='end'>
                      <IconButton
                        aria-label='toggle password visibility'
                        onClick={() => {
                          return setVisible(!visible);
                        }}
                        edge='end'>
                        {visible ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  )
                }}
              />
            </div>
            <div>
              <TextField
                autoComplete='confirm-password'
                label='Confirm Password'
                name='confirm-password'
                type={visible ? 'text' : 'password'}
                error={error}
                value={confirmPassword}
                variant='outlined'
                fullWidth
                onChange={(event) => {
                  setConfirmPassword(event.target.value ?? '');
                }}
                onKeyPress={(event) => {
                  checkSignup();
                  if (event.key === 'Enter') {
                    if (!error) {
                      props.signup(email, password);
                    }
                  }
                }}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position='end'>
                      <IconButton
                        aria-label='toggle confirm password visibility'
                        onClick={() => {
                          return setVisible(!visible);
                        }}
                        edge='end'>
                        {visible ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  )
                }}
              />
            </div>
            <Button
              id='login-button'
              variant='contained'
              color='primary'
              onClick={() => {
                checkSignup();
                if (!error) {
                  props.signup(email, password);
                }
              }}>
              Sign Up
            </Button>
          </div>
        </form>
      </Grid>
    </Grid>
  );
};

export default connect(
  (state) => {
    return {};
  },
  (dispatch, props) => {
    return {
      signup: (email, password) => {
        dispatch(signup(email, password));
      }
    };
  }
)(withStyles(styles)(SignupPage));