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');
CartTotal = require('./cartTotal');




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'} ;

      var large = ( 
        <div>
         <ul className="nav navbar-nav navbar-right hidden-md hidden-sm hidden-xs">
            <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="#" style={{ paddingRight: '5px', backgroundColor: 'transparent' }}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts}/> </a></li>
            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}>
              <a style={{marginBottom: 10, marginRight: 10}} className="mybutton" href="#">Završi narudžbu</a></li>

          </ul>

          <ul className="nav navbar-nav navbar-right hidden-lg">
             <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',borderRight: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px', backgroundColor: 'transparent'}}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} /> </a></li>
           </ul>
          </div>
        );
       var small = (
         <span>
          <ul className="nav navbar-nav hidden-lg">
             <li onClick={this._onClick} style={{paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
          </ul>
          </span>
        );

        if (this.props.small === 'true') {
           return small; 
        }
        else {
           return large;
        }
    
  },

    // Add change listeners to stores
    componentDidMount: function() {
      CartStore.addChangeListener(this._onChange);
      if(!CartStore.dataStartedLoading()) {
        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(e) {
      NavigationActions.goToCart();
      e.preventDefault();
    }


});

module.exports = CartIcon;