<script lang="ts">
  import { modalStore } from '$lib/stores/modal';
  import { page } from '$app/stores';
  import { afterNavigate } from '$app/navigation';

  export let invisible: boolean = false;
  export let align: BioSiteAlign = 'CENTER';
  export let verticalEnd: boolean = false;
  export let path: string | undefined = undefined;
  export let navbarMount: boolean | undefined = undefined;

  const validatePath = () => {
    if (!path) return;
    if ($page.url.pathname != path) {
      $modalStore?.hideModal();
    }
  };

  afterNavigate(validatePath);
</script>

<div
  class="widget-container flex justify-center items-center"
  class:not-visible={invisible}
  class:navbar={navbarMount}
  class:!justify-start={align === 'LEFT'}
  class:!justify-end={align === 'RIGHT'}
  class:!items-end={verticalEnd}
  on:click|self={() => {
    $modalStore?.hideModal();
  }}
  aria-hidden={navbarMount !== true ? 'true' : undefined}>
  <div class:contents={align !== 'CENTER' && !navbarMount}>
    <slot />
  </div>
</div>

<style lang="postcss">
  .widget-container.not-visible {
    @apply pointer-events-none;
  }

  .widget-container:not(.not-visible):not(.navbar) {
    @apply bg-black bg-opacity-[.65] backdrop-blur-md;
  }

  .widget-container.navbar,
  .widget-container.navbar > div {
    @apply w-full h-full;
  }

  .widget-container:not(.navbar) {
    @apply fixed top-0 left-0 bottom-0 right-0 z-50 p-5;
  }
</style>
