var Backbone = require('backbone');
var _ = require('underscore');
var $ = require('jquery');

var pagesTemplate = require('./templates/triggers_pages.tpl');
var onePageTemplate = require('./templates/triggers_one_page.tpl');

var Page = Backbone.Model.extend({ url: '' });

var Pages = Backbone.Collection.extend({
    model: Page
});

var PagesView = Backbone.View.extend({
    tagName: 'table',

    className: 'table',

    template: pagesTemplate,

    events: {
      'click #add-page': 'handleAddPage',
      'click .remove-item': 'handleRemove'
    },

    initialize: function (options) {
        this.render();
    },

    render: function () {
        this.$el.html(this.template());

        this.collection.each((model) => {
            this.$('tbody').append($(onePageTemplate(model.toJSON())))
        });

        return this;
    },

    handleAddPage: function () {
        this.collection.add(new Page({
            url: this.$('#new-page').val(),
            id: _.uniqueId()
        }));
        this.render();
    },

    handleRemove: function (e) {
        var id = $(e.currentTarget).parents('tr').attr('data-id');
        this.collection.remove(id);
        this.render();
    }
});

module.exports = PagesView;