---
import { Icon } from "astro-icon/components";
import { navBarConfig, siteConfig } from "../config";
import { LinkPresets } from "../constants/link-presets";
import { LinkPreset, type NavBarLink } from "../types/config";
import { url } from "../utils/url-utils";

import Search from "./Search.svelte";
import DisplaySettings from "./widget/DisplaySettings.svelte";
import NavMenuPanel from "./widget/NavMenuPanel.astro";
const className = Astro.props.class;

let links: NavBarLink[] = navBarConfig.links.map(
  (item: NavBarLink | LinkPreset): NavBarLink => {
    if (typeof item === "number") {
      return LinkPresets[item];
    }
    return item;
  }
);
---

<div id="navbar" class="z-50 onload-animation">
  <div
    class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"
  >
  </div>
  <!-- used for onload animation -->
  <div
    class:list={[
      className,
      "card-base border border-black/10 dark:border-white/10 !overflow-visible max-w-[var(--page-width)] h-[4.5rem] !rounded-t-none mx-auto flex items-center justify-between px-4",
    ]}
  >
    <a
      href={url("/")}
      class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95"
    >
      <div class="flex flex-row text-[var(--primary)] items-center text-md">
        <Icon
          name="material-symbols:home-outline-rounded"
          class="text-[1.75rem] mb-1 mr-2"
        />
        {siteConfig.title}
      </div>
    </a>
    <div class="hidden md:flex">
      {
        links.map((l) => {
          return (
            <a
              aria-label={l.name}
              href={l.external ? l.url : url(l.url)}
              target={l.external ? "_blank" : null}
              class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"
            >
              <div class="flex items-center">
                {l.name}
                {l.external && (
                  <Icon
                    name="fa6-solid:arrow-up-right-from-square"
                    class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"
                  />
                )}
              </div>
            </a>
          );
        })
      }
    </div>
    <div class="flex">
      <!--<SearchPanel client:load>-->
      <Search client:only="svelte" />
      {
        !siteConfig.themeColor.fixed && (
          <button
            aria-label="Display Settings"
            class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90"
            id="display-settings-switch"
          >
            <Icon
              name="material-symbols:palette-outline"
              class="text-[1.25rem]"
            />
          </button>
        )
      }

      <button
        aria-label="Menu"
        name="Nav Menu"
        class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden"
        id="nav-menu-switch"
      >
        <Icon name="material-symbols:menu-rounded" class="text-[1.25rem]" />
      </button>
    </div>
    <NavMenuPanel links={links} />
    <DisplaySettings client:only="svelte" />
  </div>
</div>

<script>
  function loadButtonScript() {
    let settingBtn = document.getElementById("display-settings-switch");
    if (settingBtn) {
      settingBtn.onclick = function () {
        let settingPanel = document.getElementById("display-setting");
        if (settingPanel) {
          settingPanel.classList.toggle("float-panel-closed");
        }
      };
    }

    let menuBtn = document.getElementById("nav-menu-switch");
    if (menuBtn) {
      menuBtn.onclick = function () {
        let menuPanel = document.getElementById("nav-menu-panel");
        if (menuPanel) {
          menuPanel.classList.toggle("float-panel-closed");
        }
      };
    }
  }

  loadButtonScript();
</script>
