---
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Icon } from "astro-icon/components";
import Logo from "~/components/Logo.astro";
import ToggleTheme from "~/components/common/ToggleTheme.astro";
import ToggleMenu from "~/components/common/ToggleMenu.astro";
import Button from "~/components/ui/Button.astro";

import { getHomePermalink } from "~/utils/permalinks";
import { trimSlash } from "~/utils/permalinks";
import { footerData } from "~/navigation";
import type { CallToAction } from "~/types";

interface Link {
    text?: string;
    href?: string;
    ariaLabel?: string;
    icon?: string;
}

interface MenuLink extends Link {
    links?: Array<MenuLink>;
}

export interface Props {
    id?: string;
    links?: Array<MenuLink>;
    actions?: Array<CallToAction>;
    isSticky?: boolean;
    isDark?: boolean;
    isFullWidth?: boolean;
    showToggleTheme?: boolean;
    position?: string;
}

const {
    id = "header",
    links = [],
    actions = [],
    isSticky = false,
    isDark = false,
    isFullWidth = false,
    showToggleTheme = false,
    position = "center",
} = Astro.props;

const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
const { socialLinks = [] } = footerData;
---

<header
  class:list={[
    { sticky: isSticky, relative: !isSticky, dark: isDark },
    'top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out',
  ]}
  {...isSticky ? { 'data-aw-sticky-header': true } : {}}
  {...id ? { id } : {}}
>
  <div class="absolute inset-0"></div>
  <div
    class:list={[
      'relative text-default px-3 md:px-6 mx-auto w-full',
      {
        'md:flex md:justify-between': position !== 'center',
      },
      {
        'md:grid md:grid-cols-3 md:items-center': position === 'center',
      },
      {
        'max-w-7xl': !isFullWidth,
      },
    ]}
    style="height: var(--sl-nav-height); padding-top: var(--sl-nav-pad-y); padding-bottom: var(--sl-nav-pad-y);"
  >
    <div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between']}>
      <a class="flex items-center" href={getHomePermalink()}>
        <Logo />
      </a>
      <div class="flex items-center md:hidden">
        <ToggleMenu />
      </div>
    </div>
    <nav
      class="items-center w-full md:w-auto hidden md:flex md:mx-5 text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:justify-self-center"
      aria-label="Main navigation"
    >
      <ul
        class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium md:justify-center"
      >
        {
          links.map(({ text, href, links }) => (
            <li class={links?.length ? 'dropdown' : ''}>
              {links?.length ? (
                <>
                  <button
                    type="button"
                    class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap"
                  >
                    {text}{' '}
                    <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
                  </button>
                  <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">
                    {links.map(({ text: text2, href: href2 }) => (
                      <li>
                        <a
                          class:list={[
                            'first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap',
                            { 'aw-link-active': href2 === currentPath },
                          ]}
                          href={href2}
                        >
                          {text2}
                        </a>
                      </li>
                    ))}
                  </ul>
                </>
              ) : (
                <a
                  class:list={[
                    'hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap',
                    { 'aw-link-active': href === currentPath },
                  ]}
                  href={href}
                >
                  {text}
                </a>
              )}
            </li>
          ))
        }
      </ul>
    </nav>
    <div
      class:list={[
        { 'ml-auto rtl:ml-0 rtl:mr-auto': position === 'left' },
        'hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end',
      ]}
    >
      <div class="items-center flex justify-between w-full md:w-auto">
        <div class="flex items-center gap-2">
          {
            socialLinks?.length ? (
              <ul class="flex items-center gap-1">
                {socialLinks.map(({ ariaLabel, href, icon }) => (
                  <li>
                    <a
                      class="text-muted dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1.5 inline-flex items-center transition-colors"
                      aria-label={ariaLabel}
                      href={href}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {icon && <Icon name={icon} class="w-4 h-4" />}
                    </a>
                  </li>
                ))}
              </ul>
            ) : (
              ''
            )
          }
          {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
        </div>
        {
          actions?.length ? (
            <span class="ml-4 rtl:ml-0 rtl:mr-4">
              {actions.map((btnProps) => (
                <Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto" />
              ))}
            </span>
          ) : (
            ''
          )
        }
      </div>
    </div>
  </div>
</header>
