import React from 'react'

function isFileDrag (event) {
  return Array.from(event.dataTransfer?.types || []).includes('Files')
}

// TODO: remove the need for className prop
// it causses ennying issues
export const asDropZone = Component => ({
  dropEffect = 'move',
  onDragOver = () => {},
  onDragEnter = () => {},
  onDragLeave = () => {},
  onDrop = () => {},
  onFilesDrop,
  format = 'text/plain',
  ...props
}) => {

  const _onDragOver = event => {
    event.preventDefault()
    // eslint-disable-next-line no-param-reassign
    event.dataTransfer.dropEffect = isFileDrag(event) ? 'copy' : dropEffect
    onDragOver(event)
  }

  const _onDragEnter = event => {
    event.preventDefault()
    event.currentTarget.classList.add('dropzone--dragover')
    onDragEnter(event)
  }

  const _onDragLeave = event => {
    // Ignore leave events that stay within this drop zone (child → child).
    if (event.currentTarget.contains(event.relatedTarget)) return
    event.preventDefault()
    event.currentTarget.classList.remove('dropzone--dragover')
    onDragLeave(event)
  }

  const _onDrop = event => {
    event.preventDefault()
    event.stopPropagation()
    event.currentTarget.classList.remove('dropzone--dragover')

    const files = Array.from(event.dataTransfer.files || [])
    if (files.length) {
      onFilesDrop?.(files)
      return
    }

    const data = event.dataTransfer.getData(format)
    if (data) onDrop(data)
  }

  return (
    <>
      <style href="@ossy/design-system/dropzone" precedence="high">
      {`
        [data-dropzone].dropzone--dragover {
          outline: 1px solid hsl(199, 98%, 43%);
          position: relative;
        }

        [data-dropzone].dropzone--dragover:after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: hsla(199, 98%, 43%, .2);
          pointer-events: none;
        }
      `}
      </style>
      <Component
        onDragOver={_onDragOver}
        onDragEnter={_onDragEnter}
        onDragLeave={_onDragLeave}
        onDrop={_onDrop}
        data-dropzone
        {...props}
      />
    </>
  )
}