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

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

var normalizeCount = function(count) {
  if (count >= 0 && count < 10) {
    return "\u00a0" + count; 
  }  else {
    return count;
  }
}

var CartIcon = React.createClass({

  render: function() {  

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

      return ( 

         <ul className="nav navbar-nav navbar-right">
                            <li><LoginStatus /></li>
                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#">0,00 KM</a></li>
                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}><a style={{marginLeft: 20, marginBottom: 10, marginRight: 15}} className="mybutton" href="#">Završi narudžbu</a></li>                            
          </ul>
        );
  },

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