<script lang="ts">
  import { addEmitter } from "./AddModal.svelte";
  import Icon from "./utils/Icon.svelte";

  let dragging = false;

  function onDrop(ev: DragEvent) {
    if (ev.dataTransfer.files.length > 0) {
      addEmitter.emit("files", Array.from(ev.dataTransfer.files));
    } // TODO: else check for URLs
    dragging = false;
  }

  function onDragEnter() {
    // noop
  }

  function onDragOver() {
    dragging = true;
  }

  function onDragLeave() {
    dragging = false;
  }

  function onPaste(ev: ClipboardEvent) {
    if (ev.clipboardData.files.length > 0) {
      addEmitter.emit("files", Array.from(ev.clipboardData.files));
    } // TODO: else check for URLs
  }
</script>

<svelte:body
  on:dragenter|preventDefault={onDragEnter}
  on:dragover|preventDefault={onDragOver}
  on:dragleave|preventDefault={onDragLeave}
  on:drop|preventDefault={onDrop}
  on:paste={onPaste} />

<div class="dropindicator" class:dragging>
  <div class="content">
    <div class="icon">
      <Icon name="current-location" />
    </div>
    <p>Drop an URL, an image or a file here!</p>
  </div>
</div>

<style>
  .dropindicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);

    display: none;
  }

  .dragging {
    display: unset;
  }

  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background: rgba(0, 0, 0, 0.9);

    color: var(--foreground);
    border: solid 0.25em var(--foreground);
    border-radius: 0.5em;
    padding: 1.5em;

    text-align: center;
    font-size: 32px;
  }

  .icon {
    font-size: 128px;
  }
</style>
