import css from './login.css';

import logo from './images/logo.png';
import bgImage from './images/old.map.jpg';

import React, {Component, PropTypes} from 'react';

export default class Login extends Component {

  handleLoginClick(e) {
    e.preventDefault();

    const email = this.email.value.trim();
    const password = this.password.value.trim();

    this.props.loginActions.loginUser(email, password);
  }

  render() {

    const inputs = [
      {
        name: 'email',
        inputType: 'email',
        validationState: 'isEmailValid',
        iconClass: 'fa fa-envelope-o'
      },
      {
        name: 'password',
        inputType: 'password',
        validationState: 'isPasswordValid',
        iconClass: 'fa fa-key'
      }
    ];

    const renderedInputs = inputs.map((input) => {

        const isValidationRun = this.props.validation.isValidationStarted;
        const isFieldValid = this.props.validation[input.validationState];

        const ref = (ref) => this[input.name] = ref;

        let groupClassName = 'input-group row ';
        let inputClassName = 'form-control ';
        let iconBlockClass = 'input-group-addon ';
        if (isValidationRun) {
          groupClassName += isFieldValid ? 'has-success' : 'has-danger';
          inputClassName += isFieldValid ? 'form-control-success' : 'form-control-danger';
        }

        return (
          <div className={groupClassName}>
            <div className={iconBlockClass}><i className={input.iconClass}></i></div>
            <input className={inputClassName} type={input.inputType} ref={ref} placeholder={input.name}/>
          </div>
        )
      }
    );

    let errorTemplate = '';
    if (this.props.errorMessage) {
      errorTemplate = (
        <div className="alert alert-danger" role="alert">
          { this.props.errorMessage }
        </div>
      )
    }

    let loader = '';
    if (this.props.isSendingRequest) {
      loader = (
        <img src="/loader.gif"/>
      );
    }

    return (

      <div className="container theme-login main">
        <div id="bg">
          <img src={bgImage} alt="background image"/>
        </div>

        <div className="row">
          <div className="col-xs"></div>
          <div className="col-xs-10 col-sm-8 col-md-6 col-lg-5 login-form card card-block">
            <div className="row">
              <div className="col-sm-12 pull-xs-center">
                <h3 className="card-title text-xs-center"><img src={logo} alt="Family Tree Maker"/></h3>
              </div>

              <div className="col-sm-12 col-xs-12">
                <form>
                  { renderedInputs }
                  <div className="input-group row">
                    { errorTemplate }
                  </div>

                  <div className="input-group row flex-items-xs-middle">
                    <div className="form-check">
                      <label className="form-check-label pull-xs-left">
                        <input className="form-check-input" type="checkbox"/> Keep me logged in
                      </label>
                    </div>
                    <div className="loader-button-block pull-right">
                      { loader }
                      <button className='btn btn-success pull-xs-right' type='button'
                              onClick={this.handleLoginClick.bind(this)}>Login
                      </button>
                    </div>
                  </div>

                </form>
              </div>
            </div>
          </div>
          <div className="col-xs"></div>
        </div>

      </div>
    )
  }
}

Login.propTypes = {
  loginActions: PropTypes.shape({
    loginUser: PropTypes.func.isRequired,
    logoutUser: PropTypes.func.isRequired
  }).isRequired,

  isSendingRequest: PropTypes.bool.isRequired,
  errorMessage: PropTypes.string.isRequired,

  formData: PropTypes.shape({
    email: PropTypes.string.isRequired,
    password: PropTypes.string.isRequired
  }).isRequired,
  validation: PropTypes.shape({
    isValidationStarted: PropTypes.bool.isRequired,
    isEmailValid: PropTypes.bool.isRequired,
    isPasswordValid: PropTypes.bool.isRequired
  }).isRequired
};