<script>
  import { SvelteToast } from "@zerodevx/svelte-toast";
  import { onMount } from "svelte";
  import "../app.css";
  import Navbar from "$lib/ui-components/navbar.svelte";
  import { checkAuth, checkAuthSync } from "$lib/auth/Auth";
  import { redirect } from "$lib/tools/url/URLTools";
  import { AuthStorage } from "$lib/tools/storages/auth-storage";

  let loggedIn = false;
  let authCheckInProgress = false;

  AuthStorage.subscribe((s) => {
    loggedIn = s.logged;
  });

  onMount(() => {
    if (
      !checkAuthSync() &&
      !window.location.pathname.toLocaleLowerCase().includes("/login")
    ) {
      redirect("/admin/login");
    } else if (checkAuthSync()) {
      loggedIn = true;
    }
  });
</script>

{#if loggedIn}
  <div class="fixed left-0 right-0 top-0 flex z-10">
    <Navbar />
  </div>
{/if}

<div
  class="flex justify-center flex-shrink-0 w-full h-[calc(100vh-52px-68px)] mt-[68px] overflow-auto p-4"
>
  <div class="flex w-full md:max-w-[90%] lg:max-w-[1080px]">
    <slot />
  </div>
</div>
<footer class="footer footer-center bg-base-300 text-base-content p-4">
  <aside>
    <p>
      Copyright © {new Date().getFullYear()} - All right reserved
    </p>
  </aside>
</footer>

<SvelteToast
  options={{
    duration: 2000, // duration of progress bar tween to the `next` value
    initial: 1, // initial progress bar value
    next: 0, // next progress value
    pausable: false, // pause progress bar tween on mouse hover
    dismissable: true, // allow dismiss with close button
    reversed: false, // insert new toast to bottom of stack
    intro: { x: 256 }, // toast intro fly animation settings
    theme: {
      // "--toastColor": "var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)))",
      // "--toastBackground": "var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)))",
      // "--toastBarBackground": "#2F855A",
    }, // css var overrides
    classes: [], // user-defined classes
  }}
/>
