var React = require('react');
var CartStore = require('../../stores/cartStore.js');
var CartActions = require('../../actions/cartActions.js');



var countStyle = { 
  width: '100%'
};

var AddToCart = React.createClass({

  render: function() {  

      return (
          <div className="row-fluid add-to-cart">
            <div className="col-xs-offset-1 col-xs-1"><button className="btn btn-success" onClick={this._onIncreaseClick}>+</button></div>
            <div className="col-xs-2"><button className="btn" style={countStyle} > { this.state.item.get('count') } </button></div>
            <div className="col-xs-1"><button className="btn btn-success"  onClick={this._onDecreaseClick}>-</button></div>
          </div> 
        );
  },

    // Add change listeners to stores
    componentDidMount: function() {
      CartStore.addChangeListener(this._onChange); 
      CartActions.load();
    },


    getInitialState: function() {
      var itemInCart  = CartStore.getStateFor(this.props.itemId);
      return  { item: itemInCart }
    },


    _onChange: function () {
      if (this.isMounted()) {
        var item = CartStore.getStateFor(this.props.itemId);
        this.setState({ item: item });         
      }
    },

    _onIncreaseClick: function () {
      CartActions.addItem(this.props.itemId);
    },

    _onDecreaseClick: function () {
      CartActions.takeItemOut(this.props.itemId);
    },

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

module.exports = AddToCart;