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'),
NavigationActions = require('../../actions/navigationActions'),
Section = require('../../models/section'),
LinkBanner = require('../linkBanner/linkBanner'),
Category = require('../../models/category');

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


        <div
          style={{height: "100%"}}
          className="col-lg-2 col-md-2 col-sm-4 col-xs-4 sidebar ">
          <ul>
            {(this.state.section.get('categories')).map(function(category) {
              return (<li><a href="#" onClick={self.onCategoryClick.bind(self, category, self.state.section)}>{category.name}</a></li>)
            })}
          </ul>
        </div>
        <div
          style={{height: "100%"}}
          className="col-lg-10 col-md-10 col-sm-8 col-xs-8 ">

          <LinkBanner
            locationName="section"
            locationId={Number(this.getParams().id)} />
          <div className='h3'>
            Najprodavanije u sekciji {this.state.section.get('name')}
          </div>
          <ItemList items={this.state.items} />

          {/*
          <div className='h3'>Kategorije</div>
          <div>
            {(this.state.section.get('categories') || []).map(function(category){
              return (
                <div style={s}>

                  <a onClick={self.onCategoryClick.bind(self, category, self.state.section)}>

                    <img src={category.image_url || 'http://www.windeln.de/resources/img/content/kat_windelnwickeln.jpg'}/>
                    <div>
                      {category.name}
                    </div>
                  </a>
                  <ul>
                    {category.sub_categories.map(function(sc) {
                      return (
                        <li>
                          {sc.name}
                        </li>
                      )
                    })}
                  </ul>

                </div>
              )
            })}
          </div>*/}

        </div>
      </div>
    )
  },
  onCategoryClick: function(category, section) {
    NavigationActions.goToCategory(new Category(category), section);

  },
  componentWillReceiveProps: function(nextProps) {
    var sectionId = this.getParams().id;
    ItemActions.loadBestSellingItemsForSection(sectionId);
    SectionActions.loadSectionDetails(sectionId);
  },
  componentDidMount: function() {

    var sectionId = this.getParams().id;
    ItemActions.loadBestSellingItemsForSection(sectionId);
    SectionActions.loadSectionDetails(sectionId);

    SectionStore.addChangeListener(this._onSectionChange);
    ItemStore.addChangeListener(this._onChange);
  },
  componentWillUnmount: function() {
    SectionStore.removeChangeListener(this._onSectionChange);
    ItemStore.removeChangeListener(this._onChange);
  },
  _onSectionChange: function() {
    if(this.isMounted()) {
      this.setState({
        section: SectionStore.getSectionDetails()
      });
    }
  },
  _onChange: function() {
    if(this.isMounted()) {

      this.setState({items: ItemStore.getBestSellingForSection()});
    }
  }
});

module.exports = BySection;