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



var buttonHolderStyle = {
  display: 'inline-block'
};

var AddToCart = React.createClass({

  render: function() {  

      var itemCount = this.state.item.get('count');

      var moreThanZeroItems = (
          <div className="row-fluid add-to-cart">
            <div className="span12">
              <div style={buttonHolderStyle}><button className="btn btn-default"  onClick={this._onDecreaseClick}>-</button></div>
              <div style={buttonHolderStyle}> <div className="add-to-cart-count">{ itemCount }</div> </div>
              <div style={buttonHolderStyle}><button className="btn btn-success" onClick={this._onIncreaseClick}>+ Dodaj</button></div>
            </div>
          </div> 
        );

      var zeroItems = (<div className="row-fluid add-to-cart">
            <div className="span12">
              <div style={buttonHolderStyle}><button className="btn btn-success" onClick={this._onIncreaseClick}>Kupi</button></div>
            </div>
          </div> );

      return (itemCount <= 0)  ? zeroItems : moreThanZeroItems;
  }, 

    // 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;