<script lang="ts">
  import { onMount } from "svelte";

  let clazz = "";
  export { clazz as class };

  export let style = "";
  export let centered = false;
  export let id;
  export let title;
  export let notitle = false;
  export let draggable = false;

  let header;
  let popup;

  let pos1 = 0;
  let pos2 = 0;
  let pos3 = 0;
  let pos4 = 0;

  onMount(() => {
    console.log("popup mounted");
    if (draggable) {
      console.log("importing old window positions");

      let top = window.localStorage.getItem(`pop-${id}top`);
      let left = window.localStorage.getItem(`pop-${id}left`);

      popup.style.top = top;
      popup.style.left = left;
      console.log("imported, top = " + top + " left = " + left);
    }
  });

  function dragMouseDown(e) {
    if (!draggable) {
      return;
    }
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    popup.style.top = popup.offsetTop - pos2 + "px";
    popup.style.left = popup.offsetLeft - pos1 + "px";

    window.localStorage.setItem(`pop-${id}top`, popup.style.top);
    window.localStorage.setItem(`pop-${id}left`, popup.style.left);

    console.log(
      "dragged, top = " +
        (popup.offsetTop - pos2) +
        "px" +
        " left = " +
        (popup.offsetLeft - pos1) +
        "px",
    );
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;

    window.localStorage.setItem(`pop-${id}top`, popup.style.top);
    window.localStorage.setItem(`pop-${id}left`, popup.style.left);
  }
</script>

<div
  bind:this={popup}
  class="popup {clazz}"
  class:centered
  {style}
  {id}
  on:mousedown|preventDefault={dragMouseDown}>
  {#if !notitle}
    <div bind:this={header} on:mousedown|preventDefault={dragMouseDown}>
      <h1>{title}</h1>
    </div>
  {/if}
  <slot />
</div>

<style lang="scss">
  .popup {
    padding: 1em;

    background-color: var(--bg-secondary-1);

    height: min-content;

    border-radius: 5px;
    z-index: 100000;
  }

  .popup :global(h1) {
    margin: 0;
  }
  .popup :global(h2) {
    margin: 0 0 0.5em;
    color: var(--sub-headline);
  }

  .centered {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
</style>