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>
            );
    }
});
/*
var SectionItem = React.createClass({
    subCatClicked: function() {
        alert('you clicked on subcategory');
    },
    render: function() {
        var catStyle = {
            paddingLeft: '20px'
        };
        var subStyle = {
            paddingLeft: '20px'
        };

        var style = {
            paddingLeft: '30px'
        };
        var self = this;

        return (
            <li className="active" role='presentation'>

            <a href="#">{this.props.data.get('name')}</a>
            <div>
            {
                this.props.data.get('categories').map(function(cat) {
                    return (<div style={style}> {cat.name}
                        
                        
                { cat.sub_categories.map(function(sc) {
                                                          return <div style={subStyle} onClick={self.subCatClicked}> {sc.name} </div>
                                                      }) }
                        </div>)
                })
            }
            </div>
            </li>
            );
    }
});

var SectionsListComponent = React.createClass({
    render: function() {
        return (
            <div className= "sections-list-component">

            <ul className="nav nav-pills">
            {this.props.sections.models.map(function(s){
                                                           return <SectionItem data={s}></SectionItem>
                                                       })}
            
          
            </ul>
            </div> 
        );
    }
});
*/

module.exports = SectionsListComponent;