'use strict';

(function ($) {

  var contacts = [
    {name: 'Contact 1', address: '1, a street, a town, a city, AB12 3CD', tel: '0123456789', email: 'anemail@me.com', type: 'family'},
    {name: 'Contact 2', address: '1, a street, a town, a city, AB12 3CD', tel: '0123456789', email: 'anemail@me.com', type: 'family'},
    {name: 'Contact 3', address: '1, a street, a town, a city, AB12 3CD', tel: '0123456789', email: 'anemail@me.com', type: 'friend'},
    {name: 'Contact 4', address: '1, a street, a town, a city, AB12 3CD', tel: '0123456789', email: 'anemail@me.com', type: 'colleague'},
    {name: 'Contact 5', address: '1, a street, a town, a city, AB12 3CD', tel: '0123456789', email: 'anemail@me.com', type: 'family'},
    {name: 'Contact 6', address: '1, a street, a town, a city, AB12 3CD', tel: '0123456789', email: 'anemail@me.com', type: 'colleague'},
    {name: 'Contact 7', address: '1, a street, a town, a city, AB12 3CD', tel: '0123456789', email: 'anemail@me.com', type: 'friend'},
    {name: 'Contact 8', address: '1, a street, a town, a city, AB12 3CD', tel: '0123456789', email: 'anemail@me.com', type: 'family'}
  ];

  var Contact = Backbone.Model.extend({
    defaults: {
      photo: 'https://pp.userapi.com/c837126/v837126058/3cc4c/WqVM8moEpiQ.jpg'
    }
  });

  var ContactView = Backbone.View.extend({
    tagName: 'div',
    className: 'contact',
    template: $('#contactTemplate').html(),

    render: function () {
      var tmpl = _.template(this.template);
      this.$el.html(tmpl(this.model.toJSON()));
      return this;
    }
  });

  var Directory = Backbone.Collection.extend({
    model: Contact
  });

  var DirectoryView = Backbone.View.extend({
    el: $('#contacts'),

    initialize: function () {
      this.collection = new Directory(contacts);
      // Для добавления элемента <select> на страницу, можем написать код в нашем главный шаблоне, в методе initialize
      // this.$el.find("#filter").append(this.createSelect());
      this.render();
    },

    render: function () {
      var that = this;
      _.each(this.collection.models, function (item) {
        that.renderContact(item);
      }, this);
    },

    renderContact: function (item) {
      var contactView = new ContactView({
        model: item
      });
      this.$el.append(contactView.render().el);
    },

    // будет извлекать уникальные типы. вернет массив
    // pluck извлекает все уникальные поля type из массива моделей
    getTypes: function () {
      return _.uniq(this.collection.pluck("type"), false, function (type) {
        return type.toLowerCase();
      });
    },

    // создаст выпадающий список
    createSelect: function () {
      var filter = this.el.find("#filter"),
        select = $("<select/>", {
          html: "<option>All</option>"
        });

      _.each(this.getTypes(), function (item) {
        var option = $("<option/>", {
          value: item.toLowerCase(),
          text: item.toLowerCase()
        }).appendTo(select);
      });
      return select;
    }


  });

  var directory = new DirectoryView();


}(jQuery));