import React from 'react';
import PropTypes from 'prop-types';
import { reduxForm, Field } from 'redux-form';
import css from './Login.css';
import SSOLogin from '../SSOLogin';

const propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  pristine: PropTypes.bool,
  submitting: PropTypes.bool,
  authError: PropTypes.string,
  handleSSOLogin: PropTypes.func,
  ssoActive: PropTypes.any, // eslint-disable-line react/forbid-prop-types
};

function Login(props) {
  const {
    handleSubmit,
    pristine,
    submitting,
    authError,
    handleSSOLogin,
    ssoActive,
  } = props;

  const loadingCN = `${css.loading} ${css.blue}`;
  return (
    <div className={css.loginOverlay}>
      <div className={css.loginContainer}>
        <h1>Sign In</h1>
        <form>
          <div className={css.slabStack}>
            <div className={css.majorSlab}>
              <Field id="input-username" className={css.loginInput} name="username" type="text" component="input" placeholder="Username" />
            </div>
            <div className={css.minorSlab}>
              <Field id="input-password" className={css.loginInput} name="password" type="password" component="input" placeholder="Password" />
            </div>
            <button id="clickable-login" type="submit" className={css.slabButton} onClick={handleSubmit} disabled={submitting || pristine}>
            Log in
            </button>
            { submitting ? <div><div className={loadingCN} /></div> : null }
            { authError ?
              <div>
                <span className={css.loginError}>{authError}</span>
              </div> : null }
          </div>
        </form>
        { ssoActive && <SSOLogin handleSSOLogin={handleSSOLogin} /> }
      </div>
    </div>
  );
}

Login.propTypes = propTypes;

export default reduxForm(
  {
    form: 'login',
  },
)(Login);

@@ -1504,50 +1504,13 @@
 or ?
-%0A              %3Cdiv%3E%0A                %3Cspan
+ %3Cdiv
  cla
@@ -1548,30 +1548,8 @@
 ror%7D
-%3C/span%3E%0A              
 %3C/di

Simplify display of login error message