var React = require('react'),
    Router = require('react-router'),
    ItemActions = require('../../actions/itemActions.js'),
    ItemStore = require('../../stores/itemStore'),
    NavigationStore = require('../../stores/navigationStore'),
    ItemList = require('../items/itemList'),
    ItemCollection = require('../../models/itemCollection'),
    SectionStore = require('../../stores/sectionStore'),
    SectionActions = require('../../actions/sectionActions.js'),
    Section = require('../../models/section');

var BySection = React.createClass({
  mixins: [Router.State],
    getInitialState : function() {
      return {
        items: (new ItemCollection()),
        section : (new Section())
      };
    },
    render : function() {
      return ( <div>

        <div className='col-md-2'> 
        Here goes section for refining search, by section
        </div>
        <div className='col-md-10'>
        <div className='h3'>
                 Najprodavanije u sekciji {this.state.section.get('name')} 
</div>
        <ItemList items={this.state.items} />
        <div className='h3'>Kategorije</div>

        </div>
        </div> )
    },
    componentWillReceiveProps: function(nextProps) {
      var sectionId = this.getParams().id;
      ItemActions.loadBestSellingItemsForSection(sectionId);
      SectionActions.loadSectionDetails(sectionId);
    },
    componentDidMount: function() {
      console.log('mounting....');
      var sectionId = this.getParams().id;
      ItemActions.loadBestSellingItemsForSection(sectionId);
      SectionActions.loadSectionDetails(sectionId);

      SectionStore.addChangeListener(this._onSectionChange);
      ItemStore.addChangeListener(this._onChange);
    },
    _onSectionChange: function() {
      if(this.isMounted()) {
        this.setState({
          section: SectionStore.getSectionDetails()
        });
      }
    },
    _onChange: function() {
      if(this.isMounted()) {
        console.log('items store changed! by section');
        this.setState({items: ItemStore.getBestSellingForSection()});
      }
    }
});

module.exports = BySection;