import * as UI from '../../lib'

import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { action } from '@storybook/addon-actions'

<Meta title="Drag & Drop"/>

## Drag & Drop

DragAndDrop has three functions that can be used to handle dragging and dropping of uris, files, and images.

`makeDraggable` is used to make an element Draggable. Along with the HTML Element, it is also necessary to pass an
 object with a uri. This is used to set the data on the EventListener for 'dragstart'.

`makeDropTarget` is used to make an element enabled as a drop target. Along with the HTML Element, it is also
 necessary to pass in two callback functions; one to handle draggable uris and the other to handle draggable files and images.

`uploadFiles` is used to process the files that a user is uploading.

Drag the message from the "Draggable" story or drag any file or image and drop it on the element in the "Drop Target" story to see it
 work.

<Canvas>
  <Story name="Draggable">
    {() => {
      const dragElement = document.createElement("div")
      dragElement.appendChild(document.createTextNode("Drag me to the target!"))
      const uri = new UI.rdf.NamedNode('https://exampleuser.inrupt.net')
      UI.widgets.makeDraggable(dragElement, uri)
      return dragElement
    }}
  </Story>
</Canvas>

<Canvas>
  <Story name="Drop Target">
    {() => {
      const target = document.createElement("div")
      target.style = "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px"
      target.appendChild(document.createTextNode("Drop things (URIs, files, ...) here"))
      UI.widgets.makeDropTarget(target, action('dropped uri'), action('dropped file'))
      return target
    }}
  </Story>
</Canvas>

## uploadFiles

The function `uploadFiles` could for example be used in the droppedFileHandler function which is passed to the
 makeDropTarget function.

<Canvas>
  <Story name="Upload Files" args={{ fileBase: "https://pod.example/Files", pictureBase: "https://pod.example/Pictures"}}>
    {({ fileBase, pictureBase }) => {
        const target = document.createElement("div")
        target.style = "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px"
        target.appendChild(document.createTextNode("Drop a file (document, picture, ...) here"))
        UI.widgets.makeDropTarget(target, action('dropped uri'), (files) => {
          UI.widgets.uploadFiles(UI.store.fetcher, files, fileBase, pictureBase, action('file uploaded successfully'))
        })
        return target
    }}
  </Story>
</Canvas>
