import React, { Component } from 'react';
import UmbracoContent from './umbracoContent.jsx';
import { AZURE_AD } from '../constants/appConstants';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { requestPin, loginWithPin, checkToken } from '../actions/loginActions';
import { umbracoRenderedPage } from '../actions/umbracoActions';
import { updateFormField } from '../actions/formActions';

class Login extends Component {
  /** */
  componentDidMount() {
    let { auth, dispatch } = this.props;

    dispatch(umbracoRenderedPage(window.portalPageId));
    if (auth.get('isLoggedIn')) {
      dispatch(checkToken());
    }
  }

  /** */
  componentDidUpdate(prevProps, prevState) {
    let { dispatch } = this.props;
  }

  /** */
  shouldComponentUpdate(nextProps, nextState) {
    let { auth, umbracoPage } = this.props;
    return nextProps.auth !== auth || nextProps.umbracoPage !== umbracoPage;
  }

  /**
  * Login procedure
  */
  login(e) {
    e.preventDefault();
    let { formData, dispatch, location } = this.props;
    dispatch(loginWithPin(formData.get('username'),
                          formData.get('password'),
                          formData.get('pincode')))
      .then(() => {
        if (location.state && location.state.nextPathname) {
          this.context.router.push(location.state.nextPathname);
        }
        else {
          this.context.router.push('/');
        }
      });
  }

  /**
   * Ask for PIN
   */
  askForPin(e) {
    e.preventDefault();
    let { formData, dispatch } = this.props;
    dispatch(requestPin(formData.get('username'), formData.get('password')));
  }

  /**
  * Login form
  */
  render() {
    let { auth, formData, umbracoPage } = this.props;
    let innerForm = null;

    if (auth.get('isLoggedIn')) {
      innerForm = (<p>Ingelogd: {auth.get('username')}<br/>
        (<Link to="/logout">Uitloggen</Link>)</p>);
    }
    else {
      let sterLoginUrl = `https://login.microsoftonline.com/${AZURE_AD.tenant}/oauth2/authorize?` +
        `response_type=code&client_id=${AZURE_AD.client_id}&state=${new Date().getTime()}&` +
        `redirect_uri=${encodeURIComponent(AZURE_AD.redirect_uri)}&` +
        `resource=${encodeURIComponent(AZURE_AD.resource)}&domain_hint=ster.nl`;

      let pinCodeForm = (<div>
        <div className="form-group">
          <label htmlFor="username">Gebruikersnaam</label>
          <input name="username" id="username" type="text" ref="username"
            onChange={this.props.handleChange} placeholder="Gebruikersnaam"
            className="form-control" />
        </div>
        <div className="form-group">
          <label htmlFor="password">Wachtwoord</label>
          <input name="password" id="password" type="password" ref="password"
            onChange={this.props.handleChange} placeholder="Wachtwoord"
            className="form-control" />
        </div>
      </div>);

      let button = (<button type="submit" className="btn btn-default"
        onClick={this.askForPin.bind(this)}>Stuur PIN</button>);

      if (auth.get('askForPin')) {
        pinCodeForm = (<div className="form-group">
          <label htmlFor="pincode">PIN code</label>
          <input name="pincode" id="pincode" type="password" ref="pincode"
            onChange={this.props.handleChange} className="form-control" />
        </div>);

        button = (<button type="submit" className="btn btn-default"
          onClick={this.login.bind(this)}>Login</button>);
      }

      innerForm = (
        <form className="loginForm">
          <div className="innerForm">
            {pinCodeForm}
            <div className="form-group">
              <a className="loginSterLink" href={sterLoginUrl}>
                Inloggen Ster medewerker
              </a>
              {button}
            </div>
          </div>
        </form>
      );
    }

    let error = null;
    if (auth.get('error') && auth.get('error').message) {
      error = (<p>{auth.get('error').message}</p>);
    }

    return (
      <div>
        <UmbracoContent page={umbracoPage} filter={(r, idx, arr) => r.Name === 'loginscherm-inleiding'} />
        {error}
        {innerForm}
        <UmbracoContent page={umbracoPage} filter={(r, idx, arr) => r.Name === 'loginscherm-afsluiter'} />
      </div>);
  }
}

Login.contextTypes = {
  router: React.PropTypes.object.isRequired
};

const mapStateToProps = (state) => {
  return {
    auth: state.auth,
    formData: state.formData,
    umbracoPage: state.umbracoPage,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    handleChange: (e) => {
      dispatch(updateFormField(e.target.name, e.target.value));
    },
    dispatch
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);