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

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

var AddToCart = React.createClass({
  INITIAL_ITEM_COUNT: 1,
  render: function() {
      var itemCount = this.state.count;
      var amountAndAddButton = (
          <div className="row-fluid add-to-cart">
            <div className="col-lg-12">
              <button className="btn white_button"  onClick={this._onDecreaseClick}>-</button><span className='add-to-cart-count'>{itemCount}</span>
              <button className="btn white_button" onClick={this._onIncreaseClick}>+</button>
            </div>
            <div>
            <div style={buttonHolderStyle}><button className="btn add-to-cart-button" onClick={this._addToCartClick}>Ubaci u korpu</button></div>
            </div>
          </div>
        );
      return amountAndAddButton;
  },

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

      if(!CartStore.dataStartedLoading()) {
        CartActions.load();
      };
    },


    getInitialState: function() {
      var itemInCart  = CartStore.getStateFor(this.props.item.get('id'));
      return  {
        item: itemInCart,
        count: this.INITIAL_ITEM_COUNT
      }
    },


    _onChange: function () {
      if (this.isMounted()) {
        var item = CartStore.getStateFor(this.props.item.get('id'));
        this.setState({ item: item, count: this.INITIAL_ITEM_COUNT });
      }
    },

    _onIncreaseClick: function () {

      if (this.state.count < Globals.MaxNumberOfItemsToBeAdded ) {
        this.state.count = this.state.count + 1;
        this.setState(this.state);
      }
    },

    _onDecreaseClick: function () {

      if (this.state.count > 1) {
        this.state.count = this.state.count - 1;
        this.setState(this.state);
      }
    },

    _addToCartClick: function () {
      CartActions.addNItems(this.props.item, this.state.count);

      setTimeout(function() {
        NavigationActions.goToCart();
      }, 500);
    },

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

});

module.exports = AddToCart;