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.count } </button></div>
            <div className="col-xs-1"><button className="btn btn-success"  onClick={this._onDecreaseClick}>-</button></div>
            <div className="col-xs-7"><button className="btn btn-warning">U korpu</button></div>
          </div>
        );
  },

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


    getInitialState: function() {
      return CartStore.getStateFor(this.props.itemId)
    },


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

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

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

module.exports = AddToCart;