/**
 * Created by mm28969 on 4/15/17.
 */

export class PositionList {
  list;
  source;
  placeHolderItem;

  onDrop;

  constructor(selector) {
    this.list = document.querySelector(selector);

    if (this.exits) {
      this.placeHolderItem = document.createElement('li');
      this.placeHolderItem.className = 'place-holder';
      const placeHolderIcon = document.createElement('span');
      placeHolderIcon.className = 'glyphicon glyphicon-triangle-right';
      this.placeHolderItem.appendChild(placeHolderIcon);

      let item,
        itemArray = this.list.querySelectorAll('.position-item');

      this.list.addEventListener('dragover', function (event) {
        event.preventDefault();
      });

      this.list.addEventListener('drop', (event) => {
        this.list.replaceChild(this.source, this.placeHolderItem);
        this.source.style.opacity = null;

        itemArray = this.list.querySelectorAll('.position-item');
        if (this.onDrop) {
          this.onDrop(itemArray);
        }

        event.preventDefault();
      });

      for (let i = 0; i < itemArray.length; ++i) {
        item = itemArray[i];

        item.addEventListener('dragstart', (event) => {
          this.source = event.target;
          this.source.style.opacity = '0.3';
          // this.list.insertBefore(this.placeHolderItem, this.source);

          event.dataTransfer.setData('text/plain', this.source);
          event.dataTransfer.effectAllowed = 'move';
        });

        item.addEventListener('dragenter', (event) => {
          const target = event.target;

          if (this.isBefore(this.placeHolderItem, target)) {
            this.list.insertBefore(this.placeHolderItem, target);
          } else {
            this.list.insertBefore(this.placeHolderItem, target.nextSibling);
          }
        });
      }
    }
  }

  get exits() {
    return this.list !== null && this.list !== undefined;
  }

  isBefore(a, b) {
    if (a.parentNode === b.parentNode) {
      for (let cur = a; cur; cur = cur.previousSibling) {
        if (cur === b) {
          return true;
        }
      }
    }
    return false;
  }
}