import { login, forgotPassword } 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 LoginPage = (props) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [visible, setVisible] = useState(false);
  const [error, setError] = useState(false);
  const [forgotPassword, setForgotPassword] = useState(false);

  const handleForgotPassword = () => {
    if (!!email) {
      props.forgotPassword(email);
      setForgotPassword(false);
      setError(false);
      setEmail('');
    } else {
      setError(true);
    }
  };
  return (
    <Grid container alignItems='center' justify='center'>
      <Grid item>
        <form>
          <div>
            <Typography align='center' variant='h6' gutterBottom>
              {forgotPassword ? 'Reset Password' : 'Sign in'}
            </Typography>
            <TextField
              autoComplete='current-email'
              error={error}
              label='Email'
              name='email'
              type='email'
              value={email}
              variant='outlined'
              onChange={(event) => {
                return setEmail(event.target.value ?? '');
              }}
              onKeyPress={(event) => {
                if (event.key === 'Enter') {
                  forgotPassword ? props.forgotPassword(email) : props.login(email, password);
                }
              }}
            />
            {forgotPassword === false ? (
              <>
                <div>
                  <TextField
                    autoComplete='current-password'
                    label='Password'
                    name='password'
                    type={visible ? 'text' : 'password'}
                    value={password}
                    variant='outlined'
                    onChange={(event) => {
                      setPassword(event.target.value ?? '');
                    }}
                    onKeyPress={(event) => {
                      if (event.key === 'Enter') {
                        props.login(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>
                    <Button
                      id='forgot-password-toggle-button'
                      color='secondary'
                      onClick={() => {
                        return setForgotPassword(true);
                      }}
                      size='small'>
                      Forgot Password?
                    </Button>
                  </div>
                </div>
                <Button
                  id='login-button'
                  variant='contained'
                  color='primary'
                  onClick={() => {
                    props.login(email, password);
                  }}>
                  Login
                </Button>
              </>
            ) : (
              <Grid container>
                <Grid item>
                  <Button
                    id='forgot-password-cancel-button'
                    variant='contained'
                    fullWidth
                    color='primary'
                    onClick={() => {
                      setForgotPassword(false);
                      setError(false);
                    }}>
                    Cancel
                  </Button>
                </Grid>
                <Grid item>
                  <Button
                    id='forgot-password-submit-button'
                    variant='contained'
                    color='secondary'
                    fullWidth
                    onClick={() => {
                      handleForgotPassword();
                    }}>
                    Continue
                  </Button>
                </Grid>
              </Grid>
            )}
          </div>
        </form>
      </Grid>
    </Grid>
  );
};

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