import React from 'react';
import APPCONFIG from 'constants/Config';
import TextField from 'material-ui/TextField';
import QueueAnim from 'rc-queue-anim';
import RaisedButton from 'material-ui/RaisedButton';
import Instance from '../../../components/Connection';

class ForgotPassowrd extends React.Component {
  constructor() {
    super();
    this.state = {
      brand: APPCONFIG.brand,
      email: '',
    };

    this.handleEmail = this.handleEmail.bind(this);
  }

  handleEmail = (event) => {
    this.setState(Object.assign(this.state, { email: event.target.value }));
  };

  clickEvent = (event) => {
    event.preventDefault();

    Instance.setToken(null).post('/v1/passwordreset/request/' + this.state.email).then(function (res) {
      location.href = '/#/confirm-email';
    }).catch(function (err) {
      location.href = '/#/confirm-email';
    });
    
  }

  render() {
    return (
      <div className="body-inner">
        <div className="card bg-white">
          <div className="card-content">
            <section className="logo text-center">
              <h1><a href="#/">{this.state.brand}</a></h1>
            </section>
            <form>
              <fieldset>
                <div className="form-group">
                  <TextField
                    floatingLabelText="Email"
                    onChange={this.handleEmail}
                    type="email"
                    fullWidth
                  />
                  <div className="text-small">
                    <p>Enter the email address for your account.</p>
                    <p>We will email your username and a link to reset your password.</p>
                  </div>
                </div>
              </fieldset>
            </form>
          </div>
          <div className="card-action no-border text-right">
            <RaisedButton
              label="Reset"
              primary={true}
              onClick={this.clickEvent}
              disabled={this.state.email===''}
            />
          </div>
        </div>
      </div>
    );
  }
}

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

module.exports = Page;