import { fireEvent, render, screen, within } from "@testing-library/react";
import { useEffect } from "react";
import { useHomeFragmentNavigation } from "./cinematic/useHomeFragmentNavigation";
import { Header } from "./Header";

function HomeWithHeader() {
  const onLayoutReady = useHomeFragmentNavigation();
  useEffect(() => {
    onLayoutReady();
  }, [onLayoutReady]);
  return (
    <>
      <Header />
      <section id="about" aria-label="Sobre">
        <h2>Sobre</h2>
      </section>
      <section id="contact" aria-label="Contato">
        <h2>Contato</h2>
      </section>
    </>
  );
}

describe("Header", () => {
  it("links to commercial destinations without promoting the résumé", () => {
    render(<Header />);

    const navigation = screen.getByRole("navigation", {
      name: "Navegação principal",
    });
    expect(
      within(navigation)
        .getAllByRole("link")
        .map((link) => link.getAttribute("href")),
    ).toEqual([
      "/#modalities",
      "/cases",
      "/#process",
      "/#about",
      "/#experience",
    ]);
    const contactLink = screen
      .getAllByRole("link")
      .find((link) => link.getAttribute("href") === "/#contact");
    expect(contactLink).toHaveAccessibleName();
    expect(
      screen.queryByRole("link", { name: /currículo|download cv/i }),
    ).not.toBeInTheDocument();
  });

  it("announces and controls the mobile menu", () => {
    render(<Header />);

    const menuButton = screen.getByRole("button", { name: "Abrir menu" });
    expect(menuButton).not.toHaveAttribute("aria-controls");
    expect(menuButton).toHaveAttribute("aria-expanded", "false");
    expect(
      screen.queryByRole("navigation", { name: "Navegação mobile" }),
    ).not.toBeInTheDocument();

    fireEvent.click(menuButton);

    expect(screen.getByRole("button", { name: "Fechar menu" })).toHaveAttribute(
      "aria-expanded",
      "true",
    );
    const mobileNavigation = screen.getByRole("navigation", {
      name: "Navegação mobile",
    });
    expect(
      document.getElementById(menuButton.getAttribute("aria-controls") ?? ""),
    ).toBe(mobileNavigation);
    expect(
      within(mobileNavigation)
        .getAllByRole("link")
        .map((link) => link.getAttribute("href")),
    ).toEqual([
      "/#modalities",
      "/cases",
      "/#process",
      "/#about",
      "/#experience",
      "/#contact",
    ]);
    expect(
      within(mobileNavigation).queryByRole("link", {
        name: /currículo|download cv/i,
      }),
    ).not.toBeInTheDocument();

    const mobileLink = within(mobileNavigation).getByRole("link", {
      name: "Sobre",
    });
    mobileLink.focus();
    fireEvent.keyDown(mobileLink, { key: "Escape" });
    const openButton = screen.getByRole("button", { name: "Abrir menu" });
    expect(openButton).toHaveAttribute("aria-expanded", "false");
    expect(document.activeElement).toBe(openButton);
  });

  it.each([
    ["/#about", "Sobre"],
    ["/#contact", "Contato"],
  ])(
    "closes the mobile menu and preserves destination focus for %s",
    (href, destination) => {
      window.history.replaceState(null, "", "/");
      render(<HomeWithHeader />);

      fireEvent.click(screen.getByRole("button", { name: "Abrir menu" }));
      const mobileNavigation = screen.getByRole("navigation", {
        name: "Navegação mobile",
      });
      const mobileLink = within(mobileNavigation)
        .getAllByRole("link")
        .find((link) => link.getAttribute("href") === href);
      if (!mobileLink)
        throw new Error(`Missing navigation destination: ${href}`);
      mobileLink.focus();
      fireEvent.click(mobileLink);

      expect(
        screen.getByRole("button", { name: "Abrir menu" }),
      ).toHaveAttribute("aria-expanded", "false");
      expect(
        screen.queryByRole("navigation", { name: "Navegação mobile" }),
      ).not.toBeInTheDocument();
      expect(screen.getByRole("region", { name: destination })).toHaveFocus();
    },
  );
});