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

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


var ItemWithDetailsPage = React.createClass({

    render: function() {

      var displayedItems = this.state.items.map(function (i) {
        return (
           <div key={i.get('id')} className="row">
              <div className="col-md-3"><SingleItem item={i} /> </div>
              <div className="col-md-6"> <AddToCart itemId={i.get('id')} /> </div>
           </div> 
          )
      });

      return (
     
        <div className="cart-page center">
           {displayedItems}
        </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());
        }

    },

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

});


module.exports = ItemWithDetailsPage;