// StyleSheets
import   './../../Shared/css/Color.css';

// Scripts
import   React             from 'react';
import   SweetAlert        from 'sweetalert-react';
import   { NavLink,
           Redirect }      from 'react-router-dom';
import   { connect }       from 'react-redux';
import   TextUtils         from './../../../utilities/TextUtils';
import   ValidationUtils   from './../../../utilities/ValidationUtils';
import   { fetchUser } from './../../../actions/userActions';


// Common JS Style
let  Auth          =  require('j-toker');
let  AuthConfig    =  require('./../../../api/JtokerConfig');

class Login extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         loginEmail:         '',
         loginPassword:      '',
         submitBtnText:     'Login',
         isSignedIn:        false,
         errors:            null,
         isError:           false,
         success:           false
      };

      this.handleInputFieldChange = this.handleInputFieldChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
   }

   componentDidMount() {
      this.props.fetchUser();
   }

   handleInputFieldChange(event) {
      const target = event.target;
      const name = target.name;
      this.setState(function () {
         return {
            [name]: target.value
         }
      });
   }



   handleSubmit(event) {
      let sanitizeFields = {};
      sanitizeFields['email'] = TextUtils.sanitize(this.state.loginEmail);
      sanitizeFields['password'] = this.state.loginPassword;

      this.setState({
         submitBtnText: 'Loading...',
      });

      Auth.emailSignIn(sanitizeFields)
         .then((response) => {
            this.setState(() => {
                return {
                    submitBtnText:      'Login',
                    loginEmail:         '',
                    loginPassword:      '',
                    isSignedIn:         true
                }
            });
         })
         .fail((response) => {
            this.setState(() => {
               return {
                  submitBtnText: 'Login',
                  errors: response.data.errors,
                  isError: true
               }
            });
         });


      event.preventDefault();
   }

   render() {
      let loginEmail        =   this.state.loginEmail;
      let loginPassword     =   this.state.loginPassword;
      let errors            =   this.state.errors;
      let isError           =   this.state.isError;

      if(this.props.userIsSignedIn) {
         window.location.href = '/d/projects';
      }

      return (
         <div className="login">

            {/* Email Signin Error Messages */}
            <SweetAlert
               show={isError}
               type="warning"
               title='Ooops!'
               text={errors && TextUtils.displayMessages(errors)}
               onConfirm={() => this.setState({isError: false})}
            />

            <div className="login__block active" id="l-login">
               <div className="login__block__header">
                  <i className="zmdi zmdi-account-circle" />
                  Hi there! Please Sign in
               </div>

               <form onSubmit={this.handleSubmit}>
                  <div className="login__block__body">
                     <div className="form-group form-group--float form-group--centered">
                        <input type="text"
                               name="loginEmail"
                               className={
                                  ValidationUtils.FieldLengthAndAddClass(loginEmail,
                                                                        'form-control form-control--active',
                                                                        'form-control')}
                               autoComplete="off"
                               value={loginEmail}
                               onChange={this.handleInputFieldChange}
                               autoFocus
                        />
                        <label>Email</label>
                        <i className="form-group__bar" />
                     </div>

                     <div className="form-group form-group--float form-group--centered">
                        <input type="password"
                               name="loginPassword"
                               className={
                                  ValidationUtils.FieldLengthAndAddClass(loginPassword,
                                                                        'form-control form-control--active',
                                                                        'form-control')}
                               value={loginPassword}
                               onChange={this.handleInputFieldChange}
                               autoComplete="off"
                        />
                        <label>Password</label>
                        <i className="form-group__bar" />
                     </div>

                     <div className="form-group form-group--float form-group--centered">
                        <button type="submit"
                                disabled={!loginEmail || !loginPassword}
                                className="btn btn-primary btn-block bg-blue-grey btn-lg waves-effect">
                           {this.state.submitBtnText}
                        </button>
                     </div>

                     <p>Don't have an account yet? &nbsp;
                        <NavLink exact to="/sign-up">Sign Up</NavLink>
                     </p>

                     <p>
                        <NavLink exact to="/forgot-password">Forgot password?</NavLink>
                     </p>

                  </div>
               </form>
            </div>
         </div>
      )
   }
}

const mapStateToProps = (state) => {
   return {
      user: state.user,
      userIsSignedIn: state.userIsSignedIn
   }
};

const mapDispatchToProps = (dispatch) => {
  return {
     fetchUser: () => {
        dispatch(
            fetchUser()
        );
     }
  }
};

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