import { screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it } from "vitest";
import { SCREENS } from "../src/routes";
import { fakeApi, renderApp, samplePlayerState } from "./render";

const signedIn = () =>
  fakeApi({
    getPlayerState: () => samplePlayerState({ company: { id: "c", name: "D", credits: 1234 } }),
  });

describe("app layout", () => {
  it("renders the header with credits and game clock, and the bottom navigation", async () => {
    renderApp(signedIn());
    expect(await screen.findByRole("banner")).toBeInTheDocument();
    expect(screen.getByLabelText("Credits")).toHaveTextContent("1,234 cr");
    expect(screen.getByLabelText("Game clock")).toHaveTextContent(
      /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/,
    );
    const nav = screen.getByRole("navigation", { name: "Main" });
    expect(within(nav).getAllByRole("link")).toHaveLength(SCREENS.length);
  });

  it.each(SCREENS)("shows the $title placeholder at $path", async ({ path, title }) => {
    renderApp(signedIn(), path);
    expect(await screen.findByRole("heading", { level: 1, name: title })).toBeInTheDocument();
  });

  it("navigates between screens with the bottom navigation", async () => {
    renderApp(signedIn());
    const nav = await screen.findByRole("navigation", { name: "Main" });
    await userEvent.click(within(nav).getByRole("link", { name: "Fleet" }));
    expect(screen.getByRole("heading", { level: 1, name: "Fleet" })).toBeInTheDocument();
    expect(within(nav).getByRole("link", { name: "Fleet" })).toHaveAttribute(
      "aria-current",
      "page",
    );
  });
});