// StyleSheets
import './../../../vendor/dashboard/css/sweetalert.css';
import './../../Shared/css/Error.css';

// Node modules
import   React             from     'react';
import   { NavLink,
           Redirect
         }                 from     'react-router-dom';
import   SweetAlert        from     'sweetalert-react';
import   TextUtils         from     '../../../utilities/TextUtils';
import   ValidationUtils   from     '../../../utilities/ValidationUtils';

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

const RenderErrors = (props) => {
  if (props.errors === null) {

  }
};

class SignUp extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         currentUser:                  {},
         firstName:                    '',
         lastName:                     '',
         email:                        '',
         password:                     '',
         company:                      '',
         phone:                        '',
         sentEmail:                    null,
         submitBtnText:                'Create Account',
         errors:                       null,
         success:                      false
      };

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

   componentDidMount() {

      //  Validate a user token
       Auth.validateToken()
           .then((user) => {
              this.setState(() => {
                  return {
                      currentUser: user
                  }
              });
           });

   }

   handleSubmit(event) {
      let sanitizedFields = {};
      sanitizedFields['first_name'] = TextUtils.sanitize(this.state.firstName);
      sanitizedFields['last_name'] = TextUtils.sanitize(this.state.lastName);
      sanitizedFields['email'] = TextUtils.sanitize(this.state.email);
      sanitizedFields['password'] = this.state.password;
      sanitizedFields['company'] = TextUtils.sanitize(this.state.company);
      sanitizedFields['phone'] = TextUtils.sanitize(this.state.phone);
      sanitizedFields['password_confirmation'] = this.state.password.trim();

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

      // Post Email Registration data to the server
      Auth.emailSignUp(sanitizedFields)
         .then(() => {
            this.setState(function () {
               return {
                  sentEmail: this.state.email,
                  submitBtnText: 'Create Account',
                  email:      '',
                  firstName:  '',
                  lastName:   '',
                  password:   '',
                  phone:      '',
                  company:    '',
                  errors:     null,
                  success:    true
               }
            });

         })
         .fail((response) => {
            this.setState(function () {
               return {
                  submitBtnText: 'Create Account',
                  errors: response.data.errors
               }
            });
         });

      event.preventDefault();
   }

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

   render() {
      let currentUser               =  this.state.currentUser;
      let firstName                 =  this.state.firstName;
      let lastName                  =  this.state.lastName;
      let email                     =  this.state.email;
      let phone                     =  this.state.phone;
      let password                  =  this.state.password;
      let company                   =  this.state.company;
      let errors                    =  this.state.errors;

      return(
         <div className="login">
            {/* Don't show the user the SignUp Page if a user token is already set */}
             { Object.keys(currentUser).length !== 0
               ? <Redirect to="/d/projects" />
               : null
             }

            {/* Email Registration Success Message */}
            <SweetAlert
               show={this.state.success}
               type='success'
               title='Account created!!!'
               text={'Check your email: '+ this.state.sentEmail +' to activate your account'}
               onConfirm={() => this.setState({success: false})}
            />

             <div className="login__block active" id="l-login">
               <div className="login__block__header">
                  <i className="zmdi zmdi-account-circle" />
                  Create a Bidimax account <br />
                   Your account will be setup in less than a minute.
               </div>

               <form onSubmit={this.handleSubmit} method="post">
                  <div className="login__block__body">

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


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

                     <div className="form-group form-group--float form-group--centered">
                        <input type="text"
                               className={
                                  ValidationUtils.FieldLengthAndAddClass(email,
                                                                        'form-control form-control--active',
                                                                        'form-control')}
                               onChange={this.handleInputFieldChange}
                               name="email"
                               value={email}
                               autoComplete="off"
                        />
                        <label>Email</label>
                        <i className="form-group__bar" />
                     </div>
                     {  errors !== null &&
                        errors.email &&
                        <div className="error-feedback">{'Email '+errors.email}</div>
                     }

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


                     <div className="form-group form-group--float form-group--centered">
                        <input type="text"
                               className={
                                  ValidationUtils.FieldLengthAndAddClass(company,
                                                                        'form-control form-control--active',
                                                                        'form-control')}
                               name="company"
                               onChange={this.handleInputFieldChange}
                               value={company}
                               autoComplete="off"
                        />
                        <label>Company</label>
                        <i className="form-group__bar" />
                     </div>
                     {  errors !== null &&
                        errors.company &&
                        <div className="error-feedback">{'Company '+errors.company}</div>
                     }


                     <div className="form-group form-group--float form-group--centered">
                        <input type="text"
                               className={
                                  ValidationUtils.FieldLengthAndAddClass(phone,
                                                                        'form-control form-control--active',
                                                                        'form-control')}
                               name="phone"
                               onChange={this.handleInputFieldChange}
                               value={phone}
                               autoComplete="off"
                        />
                        <label>Phone</label>
                        <i className="form-group__bar" />
                     </div>
                     {  errors !== null &&
                        errors.phone &&
                        <div className="error-feedback">{'Phone '+errors.phone}</div>
                     }


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

                     <p>Have account already? &nbsp;
                        <NavLink exact to="/login">Login</NavLink>
                     </p>
                  </div>
               </form>
            </div>
         </div>
      )
   }
}

export default SignUp;