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



var cartStyle = { 
  fontSize: '50px'
};

var CartIcon = React.createClass({

  render: function() {  

  	  var textNotificationStyle = (this.state.count > 0)  ? { display: 'inline-block'} : { display: 'none'} ;

      return (
      	  <div className="shopping-cart-icon" onClick={this._onClick}>
          	<i style={cartStyle} className="fa fa-shopping-cart"></i>
          	<div style={textNotificationStyle} className="shopping-cart-notification-text">{this.state.count}</div>
          </div>
        );
  },

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


    getInitialState: function() {
      var cartState  = CartStore.getWholeCartState();
      return  cartState;
    },

    _onChange: function () {
      if (this.isMounted()) {
        this.setState(CartStore.getWholeCartState());         
      }
    },

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

    _onClick: function() {
      NavigationActions.goToCart();
    }


});

module.exports = CartIcon;