var React = require('react'),
    SectionCollection = require('../../models/sectionCollection'),
    Section = require('../../models/section'),
    Backbone = require('backbone');

var Navigation = require('react-router').Navigation;

Backbone.$ = $;

var SectionsListComponent = React.createClass({
  mixins : [Navigation],
    getInitialState: function() {
      return {
        sections : [],
    hoveredSection : ''
      };
    },
    componentDidMount: function() {
      var sections = new SectionCollection();
      sections.fetch({success: function() {
        console.log('Loaded sections:' , sections);
        if(this.isMounted()) {
          this.setState({
            sections: sections.models
          });
        }


      }.bind(this)});
    },
    onMouseOver: function(section) {
      //console.log('mouse over!', section);

      this.setState({
        hoveredSection: section.get('id')
      });
    },
    onMouseOut: function() {
      this.setState({
        hoveredSection : ''
      });  
    },
    onSectionClick: function(section) {
      //alert('clicked on section:'+ section.get('name'));
      this.transitionTo('/sekcija/'+ section.get('id') + '/' + section.get('name'));
      this.setState({
        hoveredSection : ''
      });  

      return false;
    },
    onCategoryClick: function(category, section) {

      this.transitionTo('/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name);
      this.setState({
        hoveredSection: ''
      });
      console.log('category', category.id);
      return false;
    },
    onSubcategoryClick: function(subcategory) {

      return false;
    },
    render: function() {
      var self = this;
      var style = {
        position: 'relative'
      };
      var abStyle = {
        position: 'absolute'
      };
      return (
          <div>
          <ul className='nav nav-pills'>
          {this.state.sections.map(function(section) {

                                                       return (
                                                         <li key={section.get('id')}  role='presentation' style={style}>
                                                         <a href="#" onClick={self.onSectionClick.bind(self, section)} onMouseOver={self.onMouseOver.bind(self, section)}>
                                                         { section.get('name') }
                                                         </a>
                                                         <div style={abStyle} className={section.get('id') !== self.state.hoveredSection ? "hide section-cat-list": "section-cat-list"}  >

                                                         <ul onMouseLeave={self.onMouseOut.bind(self)}  >
                                                         {section.get('categories').map(function(category) {
                                                                                                             return (
                                                                                                               <li key={category.id}>
                                                                                                               <span onClick={self.onCategoryClick.bind(self, category, section)}>{category.name}</span>
                                                                                                               <ul>
                                                                                                               {category.sub_categories.map(function(subCategory) {

                                                                                                                                                                    return (
                                                                                                                                                                      <li key={subCategory.id}>

                                                                                                                                                                      {subCategory.name}</li>

                                                                                                                                                                      )
                                                                                                                                                                  })}

                                                                                                               </ul>
                                                                                                               </li>
                                                                                                               )
                                                                                                           })}
                                                       </ul>
                                                         </div>
                                                         </li>
                                                         )
                                                     })}
      </ul>
        </div>
        );
    }
});

module.exports = SectionsListComponent;