var React = require('react'),
    SectionCollection = require('../../models/sectionCollection'),
    Section = require('../../models/section'),
    Category = require('../../models/category'),
    Backbone = require('backbone'),
    NavigationStore = require('../../stores/navigationStore'),
    SectionStore = require('../../stores/sectionStore'),
    SectionActions = require('../../actions/sectionActions'),
    NavigationActions = require('../../actions/navigationActions');

Backbone.$ = $;

var SectionsListComponent = React.createClass({

    _onChange: function () {
      if (this.isMounted()) {
        this.setState(SectionStore.getState());
      }
    },
  
    getInitialState: function() {
      return SectionStore.getState();
    },

    componentDidMount: function() {
      SectionStore.addChangeListener(this._onChange);
      SectionActions.loadSections();
    },
    onMouseOver: function(section) {
      SectionActions.setSectionHover(section);
    
    },
    onMouseOut: function() {
      SectionActions.unsetSectionHover();
    },
    onMouseLeave: function() {
      SectionActions.unsetSectionHover();
    },
    onSectionClick: function(section) {
      SectionActions.unsetSectionHover();
      NavigationActions.goToSection(section);
      event.preventDefault();
    },
    onCategoryClick: function(category, section) {
      SectionActions.unsetSectionHover();
      NavigationActions.goToCategory(new Category(category), section);    
      event.preventDefault();
    },
    onSubcategoryClick: function(subcategory) {
      // implement in navigation actions
      // and call 
      // when ready
      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')} onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, section)} role='presentation' style={style}>
                                                         <a href="#"  onClick={self.onSectionClick.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  >
                                                         {section.get('categories').map(function(category) {
                                                                                                             return (
                                                                                                               <li key={category.id}>
                                                                                                               <a onClick={self.onCategoryClick.bind(self, category, section)}>{category.name}</a>
                                                                                                               </li>
                                                                                                               )
                                                                                                           })}
                                                       </ul>
                                                         </div>
                                                         </li>
                                                         )
                                                     })}
      </ul>
        </div>
        );
    }
});

module.exports = SectionsListComponent;