<script lang="ts">
  import Icon from "./utils/Icon.svelte";

  let dragging = false;

  function onDrop(ev: DragEvent) {
    console.log(ev.dataTransfer);
    dragging = false;
  }

  function onDragEnter(ev: DragEvent) {
    console.log("dragstart!");
  }

  function onDragOver(ev: DragEvent) {
    dragging = true;
  }

  function onDragLeave(ev: DragEvent) {
    console.log("dragleave!");
    dragging = false;
  }
</script>

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

<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>
