// Top level UI namespace

var UI = {};

UI.PropertyEditor = Backbone.View.extend({
  events: {
    'submit form': 'newValue',
    'click a.remove': 'removeValue'
  },

  initialize: function(options) {
    var that = this;
    this._values = options.values;
    this._unique = options.unique;

    // Re-render on every change
    this.bind('changed', function() {
      that.render();
    });

    // Finally, render
    this.render();
  },

  // Add a new value for the property
  newValue: function(e) {
    var val = this.$('input[name=new_value]').val();

    if (!_.include(this._values, val)) {
      if (this._unique) { // overwrite in case of unique values
        this.values = [val];
      } else {
        this._values.push(val);
      }
      this.trigger('changed');
      this.render(); // re-render
    } else {
      this.trigger('error:alreadyexists');
    }
    return false;
  },

  // Remove a certain value
  removeValue: function(e) {
    var val = $(e.target).attr('value');
    this._values = _.reject(this._values, function(v) { return v === val; });
    this.trigger('changed');
    return false;
  },

  // Get the current set of values
  values: function() {
    return this._values;
  },

  // Render the editor, including the display of values
  render: function() {
    $(this.el).html(_.renderTemplate('property_editor', {
      values: this._values
    }));
  }
});