var $ = require('jquery');
var Backbone = require('backbone');
var listTemplate = require('../../templates/addresslist.hbs');
var formTemplate = require('../../templates/addressform.hbs');
var detailTemplate = require('../../templates/addressdetail.hbs');

var AddressFormView = Backbone.View.extend({
  tagName: 'form',
  template: formTemplate,
  events: {
    'submit': 'addAddress'
  },
  render: function(){
    var renderedHtml = this.template();
    this.$el.html(renderedHtml);
    return this;
  },
  addAddress: function(event){
    event.preventDefault();
    this.collection.create({
      title: $('#title').val(),
      url: $('#url').val(),
      tag: $('#tag').val(),
    });
    $('#title').val('');
    $('#url').val('');
    $('#tag').val('');
  },
});

var AddressListView = Backbone.View.extend({
  tagName: 'ul',
  initialize: function(){
    this.listenTo(this.collection, 'add', this.renderItem);
  },
  render: function(){
    return this;
  },
  renderItem: function(address){
    console.log('address', address);
    var addressItem = new AddressItemView({model: address});
    this.$el.append(addressItem.render().el);
  }
});

var AddressItemView = Backbone.View.extend({
  tagName: 'li',
  template: listTemplate,
  render: function(){
    var context = this.model.toJSON();
    this.$el.html(this.template(context));
    return this;
  }
});

var AddressDetailView = Backbone.View.extend({
  template: detailTemplate,
  render: function(){
    this.$el.html('').append(this.template);
    return this;
  }
});

module.exports = {
  'AddressFormView': AddressFormView,
  'AddressListView': AddressListView,
  'AddressItemView': AddressItemView,
  'AddressDetailView': AddressDetailView,
}

var $ = require('jquery');
var Backbone = require('backbone');
var views = require('./views/addressview');
var models = require('./models/address');

var Router = Backbone.Router.extend({
  routes: {
    '': 'index',
    'detail/:id/': 'detail'
  },

  initialize: function(){
    this.collection = new models.AddressCollection();
  },

  index: function(){
    var addressForm = new views.AddressFormView({collection: this.collection});
    $('.app').html(addressForm.render().el);

    var addressListing = new views.AddressListView({collection: this.collection});
    $('.app').append(addressListing.render().el);

    this.collection.fetch();
  },

  detail: function(addressId){
    this.collection.fetch().done(function(){
      var address = this.collection.get(addressId);
      var addressDetail = new views.AddressDetailView({model: address});
      $('.app').html(addressDetail.render().el);
    }.bind(this));
  },
});

var router = new Router();

module.exports = router;