'use strict';
var React = require('react');
var ProgressTracker = require('./js/ProgressTracker.jsx')

var FormFlow = React.createClass({
  getInitialState: function(){
    return {
      statusClass: "pure-u-1-1 status-bar",
      controlClass: "pure-u-1-1 control-bar",
      nextBtnClass: "button-success pure-button next",
      prevBtnClass: "button-secondary pure-button prev",
      step: 2,
      maxSteps: 8
    }
  },

  onNext: function(event){
    this.setState({step: this.state.step + 1 <= this.state.maxSteps ? this.state.step+1 : this.state.maxSteps})
  },

  onPrev: function(event){
    this.setState({step: this.state.step - 1 >= 1 ? this.state.step-1 : 1})
  },

  render: function(){
    return(<ProgressTracker 
      statusClass={this.state.statusClass}  
      controlClass={this.state.controlClass}  
      nextBtnClass={this.state.nextBtnClass}  
      prevBtnClass={this.state.prevBtnClass}  
      onPrev={this.onPrev}
      onNext={this.onNext}
      step={this.state.step}  
      maxSteps={this.state.maxSteps}  
    />);
  }
});

React.render(
  React.createElement(FormFlow), 
  document.getElementById('interactive-pane')
);