export default Ember.Component.extend({
  classNameBindings: [':value-list'],

  _enableSorting: function() {
    const self = this;
    const placeholder = document.createElement("div");
    placeholder.className = "placeholder";

    let dragging = null;
    let over = null;
    let nodePlacement;

    this.$().on('dragstart.discourse', '.values .value', function(e) {
      dragging = e.currentTarget;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData("text/html", e.currentTarget);
    });

    this.$().on('dragend.discourse', '.values .value', function() {
      Ember.run(function() {
        dragging.parentNode.removeChild(placeholder);
        dragging.style.display = 'block';

        // Update data
        const from = Number(dragging.dataset.index);
        let to = Number(over.dataset.index);
        if (from < to) to--;
        if (nodePlacement === "after") to++;

        const collection = self.get('collection');
        const fromObj = collection.objectAt(from);
        collection.replace(from, 1);
        collection.replace(to, 0, [fromObj]);
        self._saveValues();
      });
      return false;
    });

    this.$().on('dragover.discourse', '.values', function(e) {
      e.preventDefault();
      dragging.style.display = 'none';
      if (e.target.className === "placeholder") { return; }
      over = e.target;

      const relY = e.originalEvent.clientY - over.offsetTop;
      const height = over.offsetHeight / 2;
      const parent = e.target.parentNode;

      if (relY > height) {
        nodePlacement = "after";
        parent.insertBefore(placeholder, e.target.nextElementSibling);
      } else if(relY < height) {
        nodePlacement = "before";
        parent.insertBefore(placeholder, e.target);
      }
    });
  }.on('didInsertElement'),

  _removeSorting: function() {
    this.$().off('dragover.discourse').off('dragend.discourse').off('dragstart.discourse');
  }.on('willDestroyElement'),

  _setupCollection: function() {
    const values = this.get('values');
    if (this.get('inputType') === "array") {
      this.set('collection', values || []);
    } else {
      this.set('collection', (values && values.length) ? values.split("\n") : []);
    }
  }.on('init').observes('values'),

  _saveValues: function() {
    if (this.get('inputType') === "array") {
      this.set('values', this.get('collection'));
    } else {
      this.set('values', this.get('collection').join("\n"));
    }
  },

  inputInvalid: Ember.computed.empty('newValue'),

  keyDown(e) {
    if (e.keyCode === 13) {
      this.send('addValue');
    }
  },

  actions: {
    addValue() {
      if (this.get('inputInvalid')) { return; }

      this.get('collection').addObject(this.get('newValue'));
      this.set('newValue', '');

      this._saveValues();
    },

    removeValue(value) {
      const collection = this.get('collection');
      collection.removeObject(value);
      this._saveValues();
    }
  }
});