import { Listenable } from '../../Listenable'
import { Listener } from '../../Listener'

export type IODragDropEvent = {}

export function makeDragDropListener(
  listener: (event: IODragDropEvent, _event: DragEvent) => void,
  _global: boolean = false
): Listener {
  return (component) => {
    return listenDragDrop(component, listener, _global)
  }
}

export function listenDragDrop(
  component: Listenable,
  listener: (event: IODragDropEvent, _event: DragEvent) => void,
  _global: boolean = false
): () => void {
  const { $element } = component

  const dragOverListener = (event: DragEvent) => {
    const { detail } = event

    listener(detail, event)
  }

  $element.addEventListener('dragdrop', dragOverListener, _global)
  return () => {
    $element.removeEventListener('dragdrop', dragOverListener, _global)
  }
}
