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'),

    FilterCriteriaStore = require('../../stores/filterCriteriaStore'),
    FilterCriteriaActions = require('../../actions/filterCriteriaActions');

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;
      var section = new Section(this.state.category.get('section'));
      var category = this.state.category;

      FilterCriteriaActions.addAppliedCategoryFilter(fc.field_name, fcv.filter_value);
      //NavigationActions.goToCategory(category, section, q)
    },
    removeAppliedFilter: function(name) {
      FilterCriteriaActions.removeAppliedCategoryFilter(name);
      //var section = new Section(this.state.category.get('section'));
      //var category = this.state.category;
      //var q = {};
      //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>
        <div>
        {this.appliedCategoryFiltersArray().map(function(acf) {
            return (<div>
              {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
              
              </div>)
                                                              })} 
        </div>

          
        <ItemList items={this.state.items} />
        </div>
        </div>
        );
    },
    appliedCategoryFiltersArray: function() {
      var filters = [];
      for(var key in this.state.appliedCategoryFilters) {
        if(this.state.appliedCategoryFilters.hasOwnProperty(key)) {
          filters.push({name: key, value: this.state.appliedCategoryFilters[key]});
        }
      }
      return filters;
    },
    componentWillReceiveProps: function() {
      var categoryId = this.getParams().id;
      ItemActions.loadByCategory(categoryId, FilterCriteriaStore.getAppliedCategoryFilters());
      CategoryActions.loadCategoryDetails(categoryId);
    },
    componentDidMount: function() {
      var categoryId = this.getParams().id;

      //var query = this.getQuery();
      //FilterCriteriaActions.setAppliedCategoryFilters(query);
      
      ItemActions.loadByCategory(categoryId, this.getQuery());

      CategoryActions.loadCategoryDetails(categoryId);

      ItemStore.addChangeListener(this._onChange);
      CategoryStore.addChangeListener(this._onChange);
      FilterCriteriaStore.addChangeListener(this._onAppliedFiltersChange);
    },
    componentWillUnmount: function() {
      ItemStore.removeChangeListener(this._onChange);
      CategoryStore.removeChangeListener(this._onChange);
      FilterCriteriaStore.removeChangeListener(this._onAppliedFiltersChange);
    },
    _onAppliedFiltersChange: function() {
      if(this.isMounted()) {
        this.setState({
          appliedCategoryFilters: FilterCriteriaStore.getAppliedCategoryFilters() 
        });

        var section = new Section(this.state.category.get('section'));
        var category = this.state.category;
        
        // TODO: investigate how to do this without setTimeout call
        setTimeout(function(){
          NavigationActions.goToCategory(category, section, this.state.appliedCategoryFilters);
        }.bind(this),0);
      }
    },
    _onChange: function() {
      if(this.isMounted()) {
        this.setState({
          items: ItemStore.getItemsForCategory(),
          category: CategoryStore.getCategoryDetails()
        });
      }
    }

});

module.exports = ByCategory;