import React from 'react';
import TextField from 'material-ui/TextField';
import QueueAnim from 'rc-queue-anim';
import RaisedButton from 'material-ui/RaisedButton';

class ResetPassowrd extends React.Component {
  constructor() {
    super();
    this.state = {
      validated:false,
    };
    
    this.buttonValidated = this.buttonValidated.bind(this);
    this.handlePass = this.handlePass.bind(this);
    this.handleConfirmationPass = this.handleConfirmationPass.bind(this);
    this.clickEvent = this.clickEvent.bind(this);
  }

  buttonValidated = () => {
    let validated = true;
    if (!this.state.password_validated || !this.state.pass || this.state.pass === null || this.state.pass === "") validated = false;

    this.setState(Object.assign(this.state, { validated: validated }));
  }

  handlePass = (event) => {
    this.setState(Object.assign(this.state, { pass: btoa(event.target.value) }));
    this.setState(Object.assign(this.state, { password_validated: this.state.pass === this.state.passConfirmation }));
  };

  handleConfirmationPass = (event) => {
    this.setState(Object.assign(this.state, { passConfirmation: btoa(event.target.value) }));
    this.setState(Object.assign(this.state, { password_validated: this.state.pass === this.state.passConfirmation }));
  };

  clickEvent = (event) => {
    location.href = '/#/login';
    /*
    event.preventDefault();
    const state = this;

    let user = {
      "provider":
        {
          "org_name": this.state.provider_name,
          "internal_id": this.state.provider_npi
        },
      "name": this.state.first + ' ' + this.state.last,
      "first": this.state.first,
      "last": this.state.last,
      "email": this.state.email,
      "phonenumber": this.state.phone_number,
      "pass": this.state.pass,
    };

    Instance.setToken(null).post('/v1/selfregister/', user).then(function (res) {
      localStorage.removeItem('loggedUser');
      location.href = '/#/login';
    }).catch(function (err) {
      if (err.response.status === 422) {
        //Unprocessable Entity (validation failed)
        state.setState(Object.assign(state.state, {
          showValidationErrors: true,
          validationErrors: err.response.data.data
        }));
      } else {
        alert('Error to log in: ' + err.message);
      }
      console.error(err);
    });
    */
  }


  render() {
    return (
      <div className="body-inner">
        <div className="card bg-white">
          <div className="card-content">
            <section className="logo text-center">
              <h1><a href="#/">Reset Password</a></h1>
            </section>
            <form>
              <fieldset>
                <div className="form-group">
                  <TextField
                    floatingLabelText="Choose New Password"
                    type="password"
                    onChange={this.handlePass}
                    onBlur={this.buttonValidated}
                  />
                  <TextField
                    floatingLabelText="Verify New Password"
                    type="password"
                    onChange={this.handleConfirmationPass}
                    onBlur={this.buttonValidated}
                  />
                </div>
              </fieldset>
            </form>
          </div>
          <div className="card-action no-border text-right">
            <RaisedButton
              label="Reset"
              primary={true}
              onClick={this.clickEvent}
              disabled={!this.state.validated}
            />
            
          </div>
        </div>
      </div>
    );
  }
}

const Page = () => (
  <div className="page-forgot">
    <div className="main-body">
      <QueueAnim type="bottom" className="ui-animate">
        <div key="1">
          <ResetPassowrd />
        </div>
      </QueueAnim>
    </div>
  </div>
);

module.exports = Page;