<script lang="ts">
import { createPopper } from '@popperjs/core';
import type { Instance } from '@popperjs/core';
import { onMount } from 'svelte';
import clickOutside from '$utils/outsideClick';

export let trigger: HTMLElement;
let tooltip: HTMLElement;
let popperInstance: Instance;
let popoverShowed: boolean = false;

onMount(() => {
  popperInstance = createPopper(trigger, tooltip, {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 8],
        },
      },
    ],
  });
  trigger.addEventListener('click', () => {
    toggleHandle();
  })
  clickOutside(trigger, () => {hide()});
});


function show() {
  popoverShowed = false;
  tooltip.setAttribute('data-show', '');
  popperInstance.update();
}

function hide() {
  popoverShowed = true;
  tooltip.removeAttribute('data-show');
}

const toggleHandle = () => {
  if (popoverShowed) {
    show();
  }
  else {
    hide();
  }
}

</script>
<div id="tooltip" role="tooltip" bind:this={tooltip}>
  <slot />
</div>
<style lang="scss">

#tooltip {
  background: transparent;
  color: white;
  font-weight: bold;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
  z-index: 100;
  display: none;
}

:global(#tooltip[data-show]) {
  display: block;
}
</style>