---
import { Icon } from "astro-icon/components";
import Container from "../Container.astro";
import BuyDropdown from "./BuyDropdown.astro";
import Trends from "~/components/Trends.astro";
import Search from "~/components/Search.astro";

import { getEntries } from "astro:content";
const { title, ...data } = Astro.props;
const relatedCourses = data?.relatedCourses
  ? await getEntries(data.relatedCourses)
  : null;
---

<flyout-menu class="group/menu">
  <nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
    <Container class="flex items-center relative py-3">
      <button
        data-toggle="menu"
        class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline
               lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition
               flex items-center gap-1 lg:group-open/menu:outline"
      >
        <div class="truncate max-w-36 sm:max-w-72">
          {title}
        </div>
        <Icon
          name="chevron-down"
          aria-hidden="true"
          class="size-4 mt-1 transition group-open/menu:-rotate-180"
        />
      </button>

      <BuyDropdown class="ml-auto" {...Astro.props} />

      <dialog
        class="absolute top-full translate-y-1 w-full bg-transparent max-lg:px-2.5"
        closedby="any"
      >
        <div class="text-black bg-lime-400 rounded-xl lg:rounded-2xl">
          <button
            class="border border-black absolute rounded-full cursor-pointer outline-none
                   top-2.5 lg:top-5 right-5"
            data-dismiss
          >
            <Icon name="x-mark" class="size-4 p-0.5" />
          </button>
          <div class="lg:w-1/2 mx-auto p-5 lg:py-24">
            <search class="space-y-5">
              <label class="block">
                <h1 class="text-pretty font-semibold text-3xl lg:text-4xl">
                  Digite o curso para ver todos detalhes
                </h1>
              </label>

              <Search />
            </search>

            <div class="space-y-1.5">
              <h2 class="font-bold text-xl flex gap-1">
                {
                  relatedCourses ? (
                    <>
                      <Icon name="puzzle-piece" class="size-6" />
                      <span>Cursos relacionados</span>
                    </>
                  ) : (
                    <>
                      <Icon name="arrow-trending-up" class="size-6" />
                      <span>Cursos mais procurados</span>
                    </>
                  )
                }
              </h2>

              <Trends relatedCourses={relatedCourses} />
            </div>
          </div>
        </div>
      </dialog>
    </Container>
  </nav>
</flyout-menu>

<script>
  class FlyoutMenu extends HTMLElement {
    private isOpen: boolean;

    constructor() {
      super();
      this.isOpen = false;
    }

    connectedCallback() {
      const menu = this.querySelector("dialog") as HTMLDialogElement;
      const button = this.querySelector(
        "button[data-toggle=menu]",
      ) as HTMLButtonElement;
      const close = this.querySelector(
        "button[data-dismiss]",
      ) as HTMLButtonElement;

      close.addEventListener("click", () => {
        menu.close();
      });

      button.addEventListener("click", () => {
        if (this.isOpen) {
          menu.close();
        } else {
          menu.show();
        }

        this.setIsOpen(!this.isOpen);
      });

      menu.addEventListener("blur", () => {
        if (!menu.contains(document.activeElement)) {
          menu.close();
        }
      });

      menu.addEventListener("close", () => {
        this.setIsOpen(false);
      });

      document.addEventListener("touchstart", (e) => {
        const target = e.target as HTMLElement;

        if (menu.contains(target)) {
          return;
        }

        if (target.closest("button[data-toggle=menu]")) {
          return;
        }

        menu.close();
      });
    }

    private setIsOpen(value: boolean) {
      this.isOpen = value;

      if (value) {
        this.setAttribute("open", "");
      } else {
        this.removeAttribute("open");
      }
    }
  }

  customElements.define("flyout-menu", FlyoutMenu);
</script>