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

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;