import { describe, expect, test } from "vitest";
import { screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { UserMenu } from "../../../components/layout/UserMenu.tsx";
import { makeSession } from "../../fixtures.ts";
import { currentPath, renderApp, renderWithContexts } from "../../render.tsx";
import { AUTH_STORAGE_KEY } from "../../../utils/auth/storage.ts";

describe("UserMenu", () => {
  test("opens, links to profile and playlists, closes on Escape and outside", async () => {
    const user = userEvent.setup();
    renderWithContexts(
      <>
        <UserMenu user={makeSession({ username: "ann" }).user} />
        <p>outside</p>
      </>,
    );
    const trigger = screen.getByRole("button", { name: "User menu" });
    await user.click(trigger);
    expect(trigger).toHaveAttribute("aria-expanded", "true");
    expect(screen.getByRole("menuitem", { name: "@ann" })).toHaveAttribute(
      "href",
      "/@ann",
    );
    expect(screen.getByRole("menuitem", { name: "Playlists" })).toHaveAttribute(
      "href",
      "/@ann/playlists",
    );
    expect(screen.getByRole("menuitem", { name: "Settings" })).toHaveAttribute(
      "href",
      "/settings",
    );
    // The site's tools are for those who hold category:manage.
    expect(screen.queryByRole("menuitem", { name: "Manage" })).toBeNull();
    await user.keyboard("{Escape}");
    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
    await user.click(trigger);
    await user.click(screen.getByText("outside"));
    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
    await user.click(trigger);
    await user.click(screen.getByRole("menuitem", { name: "@ann" }));
    expect(currentPath()).toBe("/@ann");
    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
  });

  test("links to /manage for those who hold category:manage", async () => {
    const user = userEvent.setup();
    renderWithContexts(
      <UserMenu user={makeSession({ role: "admin" }).user} />,
    );
    await user.click(screen.getByRole("button", { name: "User menu" }));
    expect(screen.getByRole("menuitem", { name: "Manage" })).toHaveAttribute(
      "href",
      "/manage",
    );
  });

  test("logs out", async () => {
    const session = makeSession({ username: "ann" });
    renderApp(<UserMenu user={session.user} />, { session });
    const user = userEvent.setup();
    await user.click(screen.getByRole("button", { name: "User menu" }));
    await user.click(screen.getByRole("menuitem", { name: "Log out" }));
    expect(localStorage.getItem(AUTH_STORAGE_KEY)).toBeNull();
    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
  });
});