var React = require('react');
var ItemList = require('./itemList');
var ItemStore = require('../../stores/itemStore.js');
var ItemActions = require('../../actions/itemActions.js');
var ItemCollection = require('../../models/itemCollection');
var NavigationStore = require('../../stores/navigationStore.js');

var AllItemsInGroup = React.createClass({

  render: function() {  
      return (
        <ItemList items={this.state.items} />
        );
  },

    // Add change listeners to stores
    componentDidMount: function() {
      var groupId = this.props.groupId || NavigationStore.getGroupIdFromUrl();
      ItemActions.loadBestSellingItemsForGroup(groupId);
      ItemStore.addChangeListener(this._onChange);
    },


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


    getInitialState: function() {
      return {
          items: ItemStore.getItemsForGroup()
        }
    },


    _onChange: function () {
      if (this.isMounted()) {
        this.setState({
          items: ItemStore.getItemsForGroup()
        });
      }
    },
});

module.exports = AllItemsInGroup;