var React = require('react'),
    Router = require('react-router'),
    Category = require('../../models/category'),
    ItemCollection = require('../../models/itemCollection'),
    ItemActions = require('../../actions/itemActions.js'),
    ItemStore = require('../../stores/itemStore'),
    NavigationStore = require('../../stores/navigationStore'),
    ItemList = require('../items/itemList'),
    NavigationActions = require('../../actions/navigationActions');

var ByCategory = React.createClass({
  mixins: [Router.State],
  getInitialState: function() {
    var category = new Category();
    var items = new ItemCollection();
    return {
      category: category,
    items: items
    };
  },
    render: function() {
      return (
        <div>
<div className='col-md-2'> 
        Here goes section for refining search, by section
        </div>

        <div className='col-md-10'>
        
        <h3> Browse products by category</h3>
        Number of items in this category: {this.state.items.length}
        <ItemList items={this.state.items} />
        </div>
        </div>
        );
    },
    componentWillReceiveProps: function() {
      var categoryId = this.getParams().id;
      ItemActions.loadByCategory(categoryId);
      // TODO: load category details
    },
    componentDidMount: function() {
      var categoryId = this.getParams().id;
      ItemActions.loadByCategory(categoryId);

      ItemStore.addChangeListener(this._onChange);
    },
    componentWillUnmount: function() {
      ItemStore.removeChangeListener(this._onChange);
    },
    _onChange: function() {
      if(this.isMounted()) {
        this.setState({
          items: ItemStore.getItemsForCategory()
        });
      }
    }

});

module.exports = ByCategory;