import {Plugin} from "prosemirror-state"
import {dropPoint} from "prosemirror-transform"

// :: (options: ?Object) → Plugin
// Create a plugin that, when added to a ProseMirror instance,
// causes a decoration to show up at the drop position when something
// is dragged over the editor.
//
//   options::- These options are supported:
//
//     color:: ?string
//     The color of the cursor. Defaults to `black`.
//
//     width:: ?number
//     The precise width of the cursor in pixels. Defaults to 1.
//
//     class:: ?string
//     A CSS class name to add to the cursor element.
export function dropCursor(options = {}) {
  return new Plugin({
    view(editorView) { return new DropCursorView(editorView, options) }
  })
}

class DropCursorView {
  constructor(editorView, options) {
    this.editorView = editorView
    this.width = options.width || 1
    this.color = options.color || "black"
    this.class = options.class
    this.cursorPos = null
    this.element = null
    this.timeout = null

    this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(name => {
      let handler = e => this[name](e)
      editorView.dom.addEventListener(name, handler)
      return {name, handler}
    })
  }

  destroy() {
    this.handlers.forEach(({name, handler}) => this.editorView.dom.removeEventListener(name, handler))
  }

  update(editorView, prevState) {
    if (this.cursorPos != null && prevState.doc != editorView.state.doc) {
      if (this.cursorPos > editorView.state.doc.content.size) this.setCursor(null)
      else this.updateOverlay()
    }
  }

  setCursor(pos) {
    if (pos == this.cursorPos) return
    this.cursorPos = pos
    if (pos == null) {
      this.element.parentNode.removeChild(this.element)
      this.element = null
    } else {
      this.updateOverlay()
    }
  }

  updateOverlay() {
    let $pos = this.editorView.state.doc.resolve(this.cursorPos), rect
    if (!$pos.parent.inlineContent) {
      let before = $pos.nodeBefore, after = $pos.nodeAfter
      if (before || after) {
        let nodeRect = this.editorView.nodeDOM(this.cursorPos - (before ?  before.nodeSize : 0)).getBoundingClientRect()
        let top = before ? nodeRect.bottom : nodeRect.top
        if (before && after)
          top = (top + this.editorView.nodeDOM(this.cursorPos).getBoundingClientRect().top) / 2
        rect = {left: nodeRect.left, right: nodeRect.right, top: top - this.width / 2, bottom: top + this.width / 2}
      }
    }
    if (!rect) {
      let coords = this.editorView.coordsAtPos(this.cursorPos)
      rect = {left: coords.left - this.width / 2, right: coords.left + this.width / 2, top: coords.top, bottom: coords.bottom}
    }

    let parent = this.editorView.dom.offsetParent
    if (!this.element) {
      this.element = parent.appendChild(document.createElement("div"))
      if (this.class) this.element.className = this.class
      this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none; background-color: " + this.color
    }
    let parentLeft, parentTop
    if (!parent || parent == document.body && getComputedStyle(parent).position == "static") {
      parentLeft = -pageXOffset
      parentTop = -pageYOffset
    } else {
      let rect = parent.getBoundingClientRect()
      parentLeft = rect.left - parent.scrollLeft
      parentTop = rect.top - parent.scrollTop
    }
    this.element.style.left = (rect.left - parentLeft) + "px"
    this.element.style.top = (rect.top - parentTop) + "px"
    this.element.style.width = (rect.right - rect.left) + "px"
    this.element.style.height = (rect.bottom - rect.top) + "px"
  }

  scheduleRemoval(timeout) {
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => this.setCursor(null), timeout)
  }

  dragover(event) {
    if (!this.editorView.editable) return
    let pos = this.editorView.posAtCoords({left: event.clientX, top: event.clientY})
    
    const node = this.editorView.state.doc.nodeAt(pos.inside === -1 ? pos.pos : pos.inside);
    const disableDropCursor = (node && node.type.spec.disableDropCursor) ? node.type.spec.disableDropCursor : false;
    const isDropCursorDisabled = typeof disableDropCursor === 'function' ? disableDropCursor(this.editorView, pos) : disableDropCursor;

    if (isDropCursorDisabled) return;
    
    if (pos) {
      let target = pos.pos
      if (this.editorView.dragging && this.editorView.dragging.slice) {
        target = dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice)
        if (target == null) return this.setCursor(null)
      }
      this.setCursor(target)
      this.scheduleRemoval(5000)
    }
  }

  dragend() {
    this.scheduleRemoval(20)
  }

  drop() {
    this.scheduleRemoval(20)
  }

  dragleave(event) {
    if (event.target == this.editorView.dom || !this.editorView.dom.contains(event.relatedTarget))
      this.setCursor(null)
  }
}

@@ -280,24 +280,266 @@
  editor.%0A//%0A
+// Nodes may add a %60disableDropCursor%60 property to their spec to%0A// control the showing of a drop cursor inside them. This may be a%0A// boolean or a function, which will be called with a view and a%0A// position, and should return a boolean.%0A//%0A
 //   options
@@ -4145,20 +4145,18 @@
     
-cons
+le
 t node =
  thi
@@ -4151,16 +4151,42 @@
 t node =
+ pos && pos.inside %3E= 0 &&
  this.ed
@@ -4225,49 +4225,16 @@
 side
- === -1 ? pos.pos : pos.inside);
+)
 %0A    
-cons
+le
 t di
@@ -4251,17 +4251,16 @@
 ursor = 
-(
 node && 
@@ -4295,77 +4295,18 @@
 rsor
-) ? node.type.spec.disableDropCursor : false;%0A    const isDropCursorD
+%0A    let d
 isab
@@ -4342,19 +4342,18 @@
 r ==
-= '
+ %22
 function
 ' ? 
@@ -4352,9 +4352,9 @@
 tion
-'
+%22
  ? d
@@ -4411,17 +4411,16 @@
 opCursor
-;
 %0A%0A    if
@@ -4425,54 +4425,24 @@
 if (
-isDropCursorDisabled) return;%0A    %0A    if (pos
+pos && !disabled
 ) %7B%0A

Update disableDropCursor implementation