var React = require('react'),
    CartStore = require('../../stores/cartStore'),
    AddToCart = require('../cart/addToCart'),
    CartActions = require('../../actions/cartActions'),
    NavigationActions = require('../../actions/navigationActions'),
    SingleItem = require('../items/singleItem'),
    Globals = require('../../globals'),
    CartTotal = require('./cartTotal');
    

var Router = require('react-router');


var CartPage = React.createClass({

    render: function() {

      var counts = this.state.itemCounts; 

      var displayedItems = this.state.items.map(function (i) {

        var count = counts[i.get('id')].get('count');
        var price = i.get('list_price');
        return (
      
           <div key={i.get('id')} className="row cart-items">
              <div className="col-md-3"><SingleItem item={i} hidePrice={true}/> </div>
              <div className="col-md-2"> { Globals.FormatCurrency(price) }</div>              
              <div className="col-md-3"> <AddToCart itemId={i.get('id')} /> </div>        
              <div className="col-md-2"> { Globals.FormatCurrency(count * price) }</div>
           </div>

          )
      });

      console.log("bla  :" , this.state.items.length);
      var cartTotal = ( 
        <div className="row cart-total">
           <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts}/> 
           <div className="col-md-1 span1">
              <button className="btn btn-warning" onClick={this._onOrderClick}>Izgleda OK</button>
           </div>
        </div>
      );

      var buySomethingMessage = (<div></div>);

      if (this.state.items.length <= 0) {
        cartTotal = (<div></div>)
        buySomethingMessage = (<div>Nemate ni jedan artikal u vašoj korpi. Kada vidite nešto što vam se sviđa - pritisnite dugme KUPI pored artikla kako biste ga dodali u korpu. </div>)

      }; 

      console.log("length :" , this.state.items.length);
 
      return (
     
        <div className="cart-page center">
           {cartTotal}
           {displayedItems} 
           {buySomethingMessage}
           {cartTotal}
        </div>
        );       

    },

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

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

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

    },
    _onOrderClick: function () {
      NavigationActions.goToCheckout();
    },

    getInitialState: function () {
      return CartStore.getWholeCartState();
    }

});


module.exports = CartPage;