<script lang="ts">
    import { browser } from '$app/environment';
    import { page } from '$app/stores';
    import Navbar from '$lib/components/dashboard/Navbar.svelte';
    import Showcase from '$lib/components/dashboard/auth/Showcase.svelte';
    import ProfileContainerPlaceholder from '$lib/components/screens/ProfileContainerPlaceholder.svelte';
    import { type } from '$lib/models/modal.js';
    import { modalStore } from '$lib/stores/modal.js';
    import Loading from '$lib/components/screens/Loading.svelte';
  
    export let data;
  
    $: auth =
      $page.url.pathname.startsWith('/dashboard/login') ||
      $page.url.pathname.startsWith('/dashboard/register') ||
      $page.url.pathname.startsWith('/dashboard/logout');
  
    $: modal = browser && $modalStore?.type != null ? type[$modalStore.type] : null;
    $: isModal = $modalStore?.visible && modal?.navbarMount === true;
  
    $: mouseDown = false;
  
    const dismissModal = () => {
      mouseDown = false;
      if ($modalStore?.visible) $modalStore.hideModal();
    };
  </script>
  
  {#if browser}
    <div class="flex h-full">
      {#if !auth}
        <div class="w-full h-full">
          <div class="h-full" on:mouseup={modal?.navbarMount ? undefined : dismissModal}>
            <slot />
          </div>
          <div
            class="navbar-container top-0 bottom-0 left-0 right-0 fixed z-40 flex flex-col justify-end items-center gap-4 p-6 overflow-hidden pointer-events-none select-none transition-all"
            class:!p-0={$modalStore?.visible && modal?.navbarMount}
            class:sm:!p-6={$modalStore?.visible && modal?.navbarMount}
            class:!pointer-events-auto={$modalStore?.visible && modal?.navbarMount}
            on:mousedown|self={() => (mouseDown = true)}
            on:mouseup|self={() => (mouseDown ? dismissModal() : undefined)}
            class:!gap-0={isModal}>
            <Navbar sessionData={data.session?.data} />
          </div>
        </div>
      {:else}
        <div class="flex w-full h-full justify-center items-center">
          <div
            class="w-full h-full flex gap-6 xl:gap-[60px] 2xl:gap-[120px] pl-6 xl:pl-[60px] 2xl:pl-[120px] pr-6 items-center justify-center">
            <div
              class="flex-shrink-0 w-[400px] lg:max-h-screen px-1 py-6 overflow-x-hidden overflow-y-auto flex flex-col items-center gap-4 md:gap-6">
              <a class="box-content p-4" href="/">
                <div class="w-16 h-16 bg-white logo" title="YourSitee logo" />
              </a>
              <slot />
            </div>
            <div class="showcase w-full h-full max-w-[1920px] max-h-[1440px] hidden lg:block">
              <Showcase />
            </div>
          </div>
        </div>
      {/if}
    </div>
  {:else}
    {#if !auth}
      <ProfileContainerPlaceholder uniqueId={data.session?.data.uniqueId} />
    {:else}
      <Loading />
    {/if}
    <noscript
      ><div class="absolute top-0 left-0 right-0 bottom-0 bg-dark-app-bg z-50 flex justify-center items-center">
        <div class="p-8">
          <p class="text-[32px] font-bold">⚠️ You don't have JavaScript enabled</p>
          <p class="text-secondary">
            Unfortunately, <b>JavaScript is required</b> for the dashboard. Enable it and try again.
          </p>
        </div>
      </div></noscript>
  {/if}
  
  <style lang="postcss">
    .navbar-container {
      animation: pop-up 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1;
      transition: gap 0.2s linear;
    }
  
    @keyframes pop-up {
      0% {
        opacity: 0;
        transform: translateY(3.25%);
      }
  
      50% {
        opacity: 0;
        transform: translateY(3.25%);
      }
  
      100% {
      }
    }
  
    .logo {
      mask-image: url(/assets/brand/icon.svg);
    }
  
    .showcase {
      height: calc(100vh - 3rem);
    }
  </style>
  