export const dropzoneMixin = function(superClass) {
  return class extends superClass {
    constructor() {
      super();
      this._boundOnDragStart = this._onDragStart.bind(this);
      this._boundOnDrag = this._onDrag.bind(this);
      this._boundOnDrag = this._onDrag.bind(this);
      this._boundOnLeave = this._onLeave.bind(this);
      this._boundOnDrop = this._onDrop.bind(this);
    }

    connectedCallback() {
      super.connectedCallback();
      this.addEventListener('dragstart', this._boundOnDragStart, false)
      this.addEventListener('dragenter', this._boundOnDrag, false)
      this.addEventListener('dragover', this._boundOnDrag, false)
      this.addEventListener('dragleave', this._boundOnLeave, false)
      this.addEventListener('drop', this._boundOnDrop, false)
    }

    disconnectedCallback() {
      super.disconnectedCallback();
      this.removeEventListener('dragstart', this._boundOnDragStart, false)
      this.removeEventListener('dragenter', this._boundOnDrag, false)
      this.removeEventListener('dragover', this._boundOnDrag, false)
      this.removeEventListener('dragleave', this._boundOnLeave, false)
      this.removeEventListener('drop', this._boundOnDrop, false)
    }

    // This event is only triggered if the dragging motion was started inside the browser window.
    // If that's the case, we know that it can't be image dragged from external. In that case this event isn't triggered because the browser doesn't have focus.
    _onDragStart() {
      this._interDragStart = true;
    }

    _onDrag(e) {
      if (this._interDragStart) return;
      this._stopPropagation(e);
      this.isDraggedOn = true;
    }

    _onLeave(e) {
      this._stopPropagation(e);
      this.isDraggedOn = false;
      this._interDragStart = false;
    }

    _onDrop(e) {
      this._stopPropagation(e);
      this._interDragStart = false;
      this.isDraggedOn = false;
      this.dispatchEvent(new CustomEvent('dropped', { detail: e.dataTransfer, bubbles: true, composed: true }));
    }

    _stopPropagation(e) {
      e.preventDefault();
      e.stopPropagation();
    }
  };
};