<script lang="ts">
  // import { goto } from "$app/navigation";
  // import { PUBLIC_BACKEND_API_HOST } from "$env/static/public";
  // import { auth, setUserLoggedOut } from "./auth.svelte";
  import { auth } from "./auth.svelte";
  
	// async function toggleMfa() {
	// 	try {
  //     const res = await fetch(`${PUBLIC_BACKEND_API_HOST}/api/v1/user/update-mfa`, {
  //       credentials: "include",
	// 			method: "PATCH",
	// 			headers: { "Content-Type": "application/json" },
	// 			body: JSON.stringify({ enable_mfa: auth.isMfaEnabled }),
	// 		});

  //     if (res.status === 401 || res.status === 500) {
  //       setUserLoggedOut();
  //       goto('/login');
	// 		  throw new Error('Unauthorized');
  //     } else if (res.status !== 204) {
  //       let msg = await res.text();
	// 		  throw new Error(`Failed updating MFA: ${msg}`);
	// 		}
	// 	} catch (err) {
  //     // TODO: show error to user
	// 		console.error(err);
	// 		auth.isMfaEnabled = !auth.isMfaEnabled;
	// 	}
	// }

  let { sideMenuOpen = $bindable() } = $props()

  let innerWidth: number | null | undefined = $state();

  let isMobile: boolean = $derived.by(() =>{
    if (!innerWidth) return false;
    return innerWidth < 768;
  });

  let isXxs: boolean = $derived.by(() =>{
    if (!innerWidth) return false;
    return innerWidth < 360;
  });
</script>

<svelte:window bind:innerWidth/>

<div class="backdrop-blur bg-white/6 fixed navbar shadow-sm top-0 z-40 py-0" id="main-navbar">
  <div class="navbar-start md:min-w-60">
    {#if auth.isAuthenticated || isMobile}
      <button aria-label="toggle side menu" onclick={() => {sideMenuOpen = !sideMenuOpen}}>
          <ul class="menu p-0"><li>
            <div class="p-2.5">
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/></svg>
            </div>
          </li></ul>
      </button>
    {/if}
    <ul class="menu pl-0">
      <li class="flex flex-row">
        <a href="/" class="text-xl font-semibold pl-2 ml-1">
          <svg class="size-6.5 translate-x-0.5 translate-y-0.25 stroke-primary-content" viewBox="-2 -2 139 157"><path style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:11px" d="M130.887 54.969 67.444 78.214 4 54.969l13.51-35.9L67.444 4l49.934 15.069zm-5.273 39.517-58.17 22.969-58.17-22.969h-.01m111.93 33.229-53.75 21.68-53.75-21.68m-.001 0L4.004 54.967m126.88 0-9.689 72.748M67.444 78.214v71.182"/></svg>
          HexName
        </a>
      </li>
    </ul>
  </div>
  <div class="navbar m-0 md:min-w-50 p-0">
    <ul class="menu menu-horizontal not-md:hidden m-auto justify-center items-center">
      <li><a href="/">Home</a></li>
      <li><a href="/about">About us</a></li>
      <li><a href="/faq">FAQ</a></li>
      <li><a href="/blog">Blogs</a></li>
    </ul>
  </div>
  <div class="navbar-end">
    {#if auth.isAuthenticated}
      <div class="dropdown dropdown-end z-40">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar" aria-label="profile icon">
          <svg class="size-9" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#dfe5ed"><path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
        </div>
        <ul
          tabindex="-1"
          class="menu menu-sm dropdown-content bg-base-200 rounded-box z-40 mt-3 w-52 p-2 shadow">
          <li><text class="font-bold">{auth.userEmail}</text></li>
          <!-- <li><input type="checkbox" value="light" class="toggle theme-controller"/></li> -->
          <!-- <li>
            <div class="justify-between">
              2-factor via email
              <label class="toggle text-base-content outline-transparent">
                <input
                  type="checkbox"
                  bind:checked={auth.isMfaEnabled}
                  onchange={toggleMfa}
                />
                <svg class="outline-transparent" aria-label="disabled" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12"/></svg>
                <svg class="outline-transparent" aria-label="enabled" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="4" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"></path></g></svg>
              </label>
            </div>
          </li> -->
          <li><a href="/delete-account">Delete account</a></li>
          <li><a href="/logout">Log out</a></li>
        </ul>
      </div>
    {:else}
      <div class="xs:gap-4 flex">
        {#if isXxs}
          <a href="/register"><button style="box-shadow: 0 0 10px rgba(0,0,0,0.6)" class="btn btn-primary break-keep whitespace-nowrap rounded-lg">Register</button></a>
        {:else}
          <a href="/register"><button style="box-shadow: 0 0 10px rgba(0,0,0,0.6)" class="btn btn-primary break-keep whitespace-nowrap rounded-lg">Create an account</button></a>
        {/if}
        <a href="/login"><button style="box-shadow: 0 0 10px rgba(0,0,0,0.6)" class="btn btn-outline btn-secondary whitespace-nowrap border-2 rounded-lg not-xs:hidden">Log in</button></a>
      </div>
    {/if}
  </div>
</div>
<div class="divider bg-primary-content/20 fixed mt-[63px] z-41 h-0.25 w-full"></div>
