<script lang="ts">
  import { onMount } from "svelte";
  import MovableIcon from "../../icons/MovableIcon.svelte";
  import ChevronDown from "../../icons/ChevronDown.svelte";
  import ChevronUp from "../../icons/ChevronUp.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;
  export let minimizable = false;

  let header;
  let popup;

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

  let minimized = false;

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

      popup.style.top = top;
      popup.style.left = left;
    }
    if (minimizable) {
      minimized = window.localStorage.getItem(`pop-${id}minim`) === "yes";
    }
  });

  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);
  }

  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);
  }

  function toggleMinimized() {
    if (minimizable) {
      minimized = !minimized;
      window.localStorage.setItem(`pop-${id}minim`, minimized ? "yes" : "no");
    }
  }
</script>

<div bind:this={popup} class="popup {clazz}" class:centered {style} {id}>
  {#if !notitle}
    <div bind:this={header} on:mousedown|preventDefault={dragMouseDown}>
      <h1>
        {#if draggable}
          <MovableIcon class="hdr-icon" />
        {/if}
        {title}
      </h1>
      {#if minimizable}
        <button class="hdrbtn" on:click|preventDefault={toggleMinimized}>
          {#if minimized}
            <ChevronDown class="hdrbtn-icon" />
          {:else}
            <ChevronUp class="hdrbtn-icon" />
          {/if}
        </button>
      {/if}
    </div>
  {/if}
  {#if !minimized}
    <slot />
  {/if}
</div>

<style lang="scss">
  .popup {
    background-color: var(--bg-secondary-1);

    padding: 1em;

    height: min-content;

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

  :global(.hdr-icon) {
    color: var(--headline);
    vertical-align: middle;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-bottom: 0.1rem;
  }

  :global(.hdrbtn) {
    cursor: pointer;
    position: absolute;
    width: 2rem;
    height: 2rem;
    right: 1em;
    top: 1em;
    border: 1px solid var(--links);
    border-radius: 0.25rem;
    appearance: none;
    background: transparent;
  }

  :global(.hdrbtn-icon) {
    color: var(--links);
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

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