'use strict';

import React, { Component } from 'react';
import Promise from 'promise';

export default class Step5 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      saving: false
    };

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

  componentDidMount() {}

  componentWillUnmount() {}

  // This review screen had the 'Save' button, on clicking this is called
  isValidated() {
    // typically this method needs to return true or false (to indicate if the local forms are validated, so StepZilla can move to the next step),
    // but in this example we simulate an ajax request which is async. In the case of async validation or server saving etc. return a Promise and StepZilla will wait
    // ... for the resolve() to work out if we can move to the next step
    // So here are the rules:
    // ~~~~~~~~~~~~~~~~~~~~~~~~
    // SYNC action (e.g. local JS form validation).. if you return:
    // true/undefined: validation has passed. Move to next step.
    // false: validation failed. Stay on current step
    // ~~~~~~~~~~~~~~~~~~~~~~~~
    // ASYNC return (server side validation or saving data to server etc).. you need to return a Promise which can resolve like so:
    // resolve(): validation/save has passed. Move to next step.
    // reject(): validation/save failed. Stay on current step

    this.setState({
      saving: true
    });

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.setState({
          saving: true
        });

        this.props.updateStore({savedToCloud: true});  // Update store here (this is just an example, in reality you will do it via redux or flux)

        // call resolve() to indicate that server validation or other aync method was a success.
        // ... only then will it move to the next step. reject() will indicate a fail
        resolve();
        // reject(); // or reject
      }, 5000);
    });
  }

  jumpToStep(toStep) {
    // We can explicitly move to a step (we -1 as its a zero based index)
    this.props.jumpToStep(toStep-1); // The StepZilla library injects this jumpToStep utility into each component
  }

  render() {
    const savingCls = this.state.saving ? 'saving col-md-12 show' : 'saving col-md-12 hide';

    return (
      <div className="step step5 review">
        <div className="row">
          <form id="Form" className="form-horizontal">
            <div className="form-group">
              <label className="col-md-12 control-label">
                <h1>Step 4: Review your Details and 'Save'</h1>
              </label>
            </div>
            <div className="form-group">
              <div className="col-md-12 control-label">
                <div className="col-md-12 txt">
                  <div className="col-md-4">
                    Gender
                  </div>
                  <div className="col-md-4">
                    {this.props.getStore().gender}
                  </div>
                </div>
                <div className="col-md-12 txt">
                  <div className="col-md-4">
                    Email
                  </div>
                  <div className="col-md-4">
                    {this.props.getStore().email}
                  </div>
                </div>
                <div className="col-md-12 txt">
                  <div className="col-md-4">
                    Emergency Email
                  </div>
                  <div className="col-md-4">
                    {this.props.getStore().emailEmergency}
                  </div>
                </div>
                <div className="col-md-12 eg-jump-lnk">
                  <a href="#" onClick={() => this.jumpToStep(1)}>e.g. showing how we use the jumpToStep method helper method to jump back to step 1</a>
                </div>
                <h2 className={savingCls}>Saving to Cloud, pls wait (by the way, we are using a Promise to do this :)...</h2>
              </div>
            </div>
          </form>
        </div>
      </div>
    )
  }
}

@@ -427,17 +427,21 @@
  %7B%0A    /
-/
+*%0A   
  typical
@@ -576,19 +576,16 @@
 ep),%0A   
- //
  but in 
@@ -739,19 +739,16 @@
 wait%0A   
- //
  ... for
@@ -809,19 +809,16 @@
 step%0A   
- //
  So here
@@ -832,27 +832,24 @@
 e rules:%0A   
- //
  ~~~~~~~~~~~
@@ -865,19 +865,16 @@
 ~~~~%0A   
- //
  SYNC ac
@@ -930,19 +930,16 @@
 urn:%0A   
- //
  true/un
@@ -992,19 +992,16 @@
 tep.%0A   
- //
  false: 
@@ -1043,19 +1043,16 @@
 step%0A   
- //
  ~~~~~~~
@@ -1072,19 +1072,16 @@
 ~~~~%0A   
- //
  ASYNC r
@@ -1201,19 +1201,16 @@
  so:%0A   
- //
  resolve
@@ -1263,19 +1263,16 @@
 tep.%0A   
- //
  reject(
@@ -1318,16 +1318,23 @@
 ent step
+%0A    */
 %0A%0A    th

comment fix