/** @jsx React.DOM */
var React = require('react');
var CustomerActionCreators = require('../../actions/CustomerActionCreators');
var validator = require('validator');
var Router = require('react-router');
var CustomerStore = require('../../stores/CustomerStore');

var Signup = React.createClass({

  mixins: [ Router.Navigation ],

  getInitialState: function(){
    return {
      errors: ''
    };
  },

  componentWillMount: function() {
    CustomerStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    CustomerStore.removeChangeListener(this._onChange);
  },

  _onChange: function(){

    if(CustomerStore.has_errors()){
      errors = CustomerStore.get_errors();
      this.setState({errors: errors});
    } else {
      this.transitionTo('/connect');
    }

  },

  handleSubmit: function(e){
      e.preventDefault();
      // AppActions.signup({});
      
      var number = this.refs.number.getDOMNode().value.trim(); 
      var cvv = this.refs.cvv.getDOMNode().value.trim(); 
      var exp_date = this.refs.expiration.getDOMNode().value.trim();     
      var exp_month = exp_date.split('/')[0];
      var exp_year = exp_date.split('/')[1];
      var name = this.refs.name.getDOMNode().value.trim();
      var first_name = name.split(" ")[0];
      var last_name = name.split(" ")[1];
      var email = this.refs.email.getDOMNode().value.trim();
      var password = this.refs.password.getDOMNode().value.trim();

      var token = 'atoken';

      data = {user:{} };

      data.user.first_name = first_name;
      data.user.last_name = last_name;
      data.user.email = email;
      data.user.username = email;
      data.user.password = password;
      data.token = token;
      data.plan = 'starter';

      CustomerActionCreators.create_customer(data);
   
  },

  render: function(){
      return (
          <div>
          <header className="account-header">
            <div className="wrap">
              <h1>Let's Get You Rolling</h1>
              <p>We're confident you'll love the product. Every customer gets our 60-day money back guarantee, but we know you won't need it.</p>
            </div>
          </header>

          <section className="account-content">
            <div className="wrap">
            <h4>{this.state.errors}</h4>
              <form onSubmit={this.handleSubmit}>

                <div className="account-input">
                  <div className="text-input sky-label">
                    <label for="account-name">Name</label>
                    <input type="text" ref="name" id="account-name" defaultValue="Royce Haynes" />
                  </div>
                  <div className="text-input sky-label">
                    <label for="account-email">Email</label>
                    <input type="text" ref="email" id="account-email" defaultValue="royce.haynes+64@gmail.com" />
                  </div>
                  <div className="text-input sky-label">
                    <label for="account-password">Password</label>
                    <input type="password" ref="password" id="account-password" defaultValue="12345678" />
                  </div>
                </div>

                <div className="signup-payment">
                  <div className="text-input sky-label">
                    <label for="credit-number">Credit Card #</label>
                    <input type="text" ref="number" id="credit-number" defaultValue="4242424242424242" />
                  </div>
                  <div className="text-input split sky-label">
                    <label for="credit-cvv">CVV</label>
                    <input type="text" ref="cvv" id="credit-cvv" defaultValue="500" />
                  </div>
                  <div className="text-input split sky-label">
                    <label for="credit-expiration">Expiration (MM/YY)</label>
                    <input type="text" ref="expiration" id="credit-expiration" defaultValue="05/15" />
                  </div>
                </div>

                <div className="account-submit">
                  <input className="btn" type="submit" value="Start connecting your services"/>
                </div>
              </form>
            </div>
          </section>
         </div>
      );
  }
});

module.exports = Signup;