var React = require('react'),
    Router = require('react-router'),
    Category = require('../../models/category'),
    Section = require('../../models/section'),
    ItemCollection = require('../../models/itemCollection'),
    ItemActions = require('../../actions/itemActions.js'),
    CategoryActions = require('../../actions/categoryActions.js'),
    CategoryStore = require('../../stores/categoryStore'),
    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
    };
  },
    onFCClick: function(fc, fcv) {

      var q = {};
      q[fc.field_name] = fcv.filter_value;
      // TODO: fix this, clean this up
      var section = new Section(this.state.category.get('section'));
      var category = this.state.category;
      NavigationActions.goToCategory(category, section, q)
    },
    render: function() {
      var self = this;
      return (
        <div>
<div className='col-md-2'> 
<div className='h4'>{this.state.category.get('name')}</div>
<div>Podkategorije</div>
        <ul>
        {(this.state.category.get('sub_categories') || []).map(function(sc) {
          return (<li> <a>{sc.name}</a></li>)
                                                             })}
        </ul>

        {this.state.category.get('filter_criterias').map(function(fc) {
          return (<div>
            
        <div className='h4'>{fc.title}</div>
        <ul>
        {fc.filter_criteria_values.map(function(fcv) {
          return (<li>
              <a onClick={self.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
            </li>)
                                                     })}
        </ul>
            </div>)
                                                                      })}
        </div>

        <div className='col-md-10'>
        
        <h3> Browse products by category  : {this.state.category.get('name')}</h3>
        Number of items in this category: {this.state.items.length}
        <div>need to filter brand: {this.getQuery().brand}</div>
        <ItemList items={this.state.items} />
        </div>
        </div>
        );
    },
    componentWillReceiveProps: function() {
      var categoryId = this.getParams().id;
      ItemActions.loadByCategory(categoryId);
      CategoryActions.loadCategoryDetails(categoryId);
    },
    componentDidMount: function() {
      var categoryId = this.getParams().id;
      ItemActions.loadByCategory(categoryId);
      CategoryActions.loadCategoryDetails(categoryId);

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

});

module.exports = ByCategory;