/**
 * @see Model.url
 */
$(function () {
  const onChange = (...args) => {
    console.log('On change', args, TodoItem);
  };

  // Create a model class.
  const TodoItem = Backbone.Model.extend({
    defaults: {
      description: "Empty todo",
      status: "incomplete",
    },
    // RESTful web service, RoR flavor.
    urlRoot: '/server/todos',
  });

  // Create a model instance to load it by ID.
  const todoItem = new TodoItem({ id: 1 });

  // Listeners
  todoItem.on('change', onChange);
  // Skip listener during a change. Notice the value format.
  todoItem.set({ 'description': 'some other description' }, {silent: true});
  // Remove listener.
  //todoItem.off('change', onChange);

  /* Built-in events
  change - when any attribute is modified
  change:<attr> - when <attr> is modified
  destroy - when the model is destroyed
  sync - when the model successfully synced with the server
  error - when model save or validation fails
  all - on any event
   */

  // Check default attribute pre-fetch.
  const defaultDescription = todoItem.get('description');

  // Access the server at /server/todos/1 (urlRoot + '/' + item.id).
  const x = todoItem.fetch({ async: false });

  // Manipulate attributes.
  const description = todoItem.get('description');
  todoItem.set('status', 'complete');

  // Save on server.
  todoItem.save();

  // Destroy on server.
  // todoItem.destroy();

  // Create a view class.
  const TodoView = Backbone.View.extend({
    tagName: 'article',
    id: 'todo-view',
    className: 'todo',

    // Underscore templating.
    template: _.template('<h3><%= description %></h3>'),

    events: {
      // Generates this.$el.('h3", 'click', alertStatus).
      'click h3': 'alertStatus',
    },

    alertStatus() {
      alert('Hey, you clicked the H3');
    },

    render: function () {
      const attributes = this.model.toJSON();
      const html = this.template(attributes);
      // Since this.el is a DOMElement, we can just wrap it with jQuery instead
      // of using a jQuery selector like $('#todo-view') or $('.todo').
      // This is better because it is id- and class- independent.
      // $(this.el).html(html);
      // Backbone even gives a shortcut: the $el property.
      this.$el.html(html);
    },
  });

  // Create a view instance.
  const todoView = new TodoView({ model: todoItem });

  // Build view.
  todoView.render();
  // console.log(todoView.el);

  // Apply to the DOM.
  $('#app').html(todoView.el);
});