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

var StartPageSectionsView = Backbone.View.extend({
    el: '#header',
    template: '<div class="section-list-container"></div>',
    initialize: function() {
        //alert('StartPageSectionsView init');
    },
    render: function() {
        this.$el.append(this.template);

        var sections = new SectionCollection();
        var self = this;
        sections.fetch({success: function() {

            console.log(sections);
            React.render(new SectionsViewComponent({
                handleClick: self.clickHandler.bind(self),
                sections: sections
            }),
                self.$('.section-list-container').get(0));
            
        }});
        return this;
    },
    clickHandler : function() {
       alert('the item was clicked!'); 
    }
});

module.exports = StartPageSectionsView;