import React, { useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { useTranslation } from 'react-i18next';

import renderIf from 'render-if';

import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import CircularProgress from '@material-ui/core/CircularProgress';
import green from '@material-ui/core/colors/green';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import Link from '@material-ui/core/Link';

import TextInput from '../../components/TextInput'

import { updateInput, executeLogonIfFormValid, advanceLogonFlow } from '../../actions/login';
import { ErrorMessage } from '../../errors';

const styles = theme => ({
  buttonProgress: {
    color: green[500],
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -12,
    marginLeft: -12
  },
  subHeader: {
    marginBottom: theme.spacing(3)
  },
  wrapper: {
    position: 'relative',
    width: '100%',
    textAlign: 'center'
  },
  message: {
    marginTop: 5,
    marginBottom: 5
  }
});

function Login(props) {
  const {
    hello,
    query,
    dispatch,
    history,
    loading,
    errors,
    classes,
    username,
    password,
    passwordResetLink,
  } = props;

  const { t } = useTranslation();
  const loginFailed = errors.http;
  const hasError = errors.http || errors.username || errors.password;
  const errorMessage = errors.http
    ? <ErrorMessage error={errors.http}></ErrorMessage>
    : (errors.username
      ? <ErrorMessage error={errors.username}></ErrorMessage>
      : <ErrorMessage error={errors.password}></ErrorMessage>);
  const extraPropsUsername = {
    "aria-invalid" : (errors.username || errors.http) ? 'true' : 'false'
  };
  const extraPropsPassword = {
    "aria-invalid" : (errors.password || errors.http) ? 'true' : 'false',
  };

  if(errors.username || errors.http){
    extraPropsUsername['extraClassName'] = 'error';
    extraPropsUsername['aria-describedby'] = 'oc-login-error-message';
  }

  if(errors.password || errors.http){
    extraPropsPassword['extraClassName'] = 'error';
    extraPropsPassword['aria-describedby'] = 'oc-login-error-message';
  }

  useEffect(() => {
    if (hello && hello.state && history.action !== 'PUSH') {
      if (!query.prompt || query.prompt.indexOf('select_account') === -1) {
        dispatch(advanceLogonFlow(true, history));
        return;
      }

      history.replace(`/chooseaccount${history.location.search}${history.location.hash}`);
      return;
    }
  });

  const handleChange = (name) => (event) => {
    dispatch(updateInput(name, event.target.value));
  };

  const handleNextClick = (event) => {
    event.preventDefault();

    dispatch(executeLogonIfFormValid(username, password, false)).then((response) => {
      if (response.success) {
        dispatch(advanceLogonFlow(response.success, history));
      }
    });
  };

  const usernamePlaceHolder = useMemo(() => {
    if (hello?.details?.branding?.usernameHintText ) {
      switch (hello.details.branding.usernameHintText) {
        case "Username":
          break;
        case "Email":
          return t("konnect.login.usernameField.placeholder.email", "Email");
        case "Identity":
          return t("konnect.login.usernameField.placeholder.identity", "Identity");
        default:
          return hello.details.branding.usernameHintText;
      }
    }

    return t("konnect.login.usernameField.placeholder.username", "Username");
  }, [hello, t]);

  return (
      <div>
      <h1 className="oc-invisible-sr"> Login </h1>
      <form action="" className="oc-login-form" onSubmit={(event) => handleNextClick(event)}>
        <TextInput
              autoFocus
              autoCapitalize="off"
              spellCheck="false"
              value={username}
              onChange={handleChange('username')}
              autoComplete="username"
              placeholder={t("konnect.login.usernameField.label", "Username")}
              label={t("konnect.login.usernameField.label", "Username")}
              id="oc-login-username"
              {...extraPropsUsername}
          />
          <TextInput
              type="password"
              margin="normal"
              onChange={handleChange('password')}
              autoComplete="current-password"
              placeholder={t("konnect.login.passwordField.label", "Password")}
              label={t("konnect.login.passwordField.label", "Password")}
              id="oc-login-password"
              {...extraPropsPassword}
          />
          {hasError && <Typography id="oc-login-error-message" variant="subtitle2" component="span" color="error" className={classes.message}>{errorMessage}</Typography>}
          <div className={classes.wrapper}>
            {loginFailed && passwordResetLink && <Link id="oc-login-password-reset" href={passwordResetLink} variant="subtitle2">{"Reset password?"}</Link>}
            <Button
              type="submit"
              color="primary"
              variant="contained"
              className="oc-button-primary oc-mt-l"
              disabled={!!loading}
              onClick={handleNextClick}
            >
              {t("konnect.login.nextButton.label", "Log in")}
            </Button>
            {loading && <CircularProgress size={24} className={classes.buttonProgress} />}
          </div>
      </form>
    </div>
  );
}

Login.propTypes = {
  classes: PropTypes.object.isRequired,

  loading: PropTypes.string.isRequired,
  username: PropTypes.string.isRequired,
  password: PropTypes.string.isRequired,
  passwordResetLink: PropTypes.string.isRequired,
  errors: PropTypes.object.isRequired,
  branding: PropTypes.object,
  hello: PropTypes.object,
  query: PropTypes.object.isRequired,

  dispatch: PropTypes.func.isRequired,
  history: PropTypes.object.isRequired
};

const mapStateToProps = (state) => {
  const { loading, username, password, errors} = state.login;
  const { branding, hello, query, passwordResetLink } = state.common;

  return {
    loading,
    username,
    password,
    errors,
    branding,
    hello,
    query,
    passwordResetLink
  };
};

export default connect(mapStateToProps)(withStyles(styles)(Login));
