'use strict';

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

var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');
var VNode = require('virtual-dom/vnode/vnode');
var VText = require('virtual-dom/vnode/vtext');
var convertHTML = require('html-to-vdom')({
  VNode: VNode,
  VText: VText
});

var MainView = Backbone.View.extend({

  template: require('../templates/main.tpl'),

  tagName:'section',
  className:'main',

  initialize: function(){
    this.listenTo(this.model,'change',this.render);
    this.count = 0;

    this.tree = h("div"); // initial state
    this.rootNode = createElement(this.tree);
    this.$el.append(this.rootNode);
    setInterval(_.bind(this.render,this),500);
  },

  render: function(){
    this.model.set({status:this.count++}, {silent:true});
    var newTree = convertHTML(this.template(this.model.attributes));
    var patches = diff(this.tree, newTree);
    this.rootNode = patch(this.rootNode, patches);
    this.tree = newTree;
    return this;
  }

});

module.exports = MainView;