import {
  cleanup,
  render,
  screen,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import assert from "node:assert";
import {
  afterEach,
  describe,
  mock,
  test,
} from "node:test";
import { Navigation } from "./index";

describe("Navigation", () => {
  afterEach(() => {
    cleanup();
  });

  test("renders link items", () => {
    const items = [
      { href: "/page-1" },
      { href: "/page-2" },
    ];

    render(<Navigation items={items} />);
    assert.strictEqual(screen.getAllByRole("link").length, 2);
  });

  test("renders navigation landmark", () => {
    render(<Navigation items={[ { href: "/page-1" } ]} />);
    assert.notStrictEqual(screen.queryByRole("navigation"), null);
  });

  test("calls onClick callback when navigation item is clicked", async () => {
    const user = userEvent.setup();
    const onClick = mock.fn(({ event }) => {
      event.preventDefault();
    });
    const items = [
      { href: "/page-1" },
    ];

    render(
      <Navigation
        items={items}
        onClick={onClick}
      />
    );

    await user.click(screen.getByRole("link"));
    assert.strictEqual(onClick.mock.calls.length, 1);
  });

  test("does not render link for disabled item", () => {
    const items = [
      { href: "/page-1", isDisabled: true },
    ];

    render(<Navigation items={items} />);
    assert.strictEqual(screen.queryByRole("link"), null);
  });

  test("does not mutate source items while applying prev/next icon props", () => {
    const items = [
      {
        isPrev: true, href: "/prev", icon: "custom-prev", iconSize: "small" as const, 
      },
      {
        isNext: true, href: "/next", icon: "custom-next", iconSize: "large" as const, 
      },
    ];
    const snapshot = JSON.stringify(items);

    render(<Navigation items={items} prevIconSrc={"icon-prev"} nextIconSrc={"icon-next"} />);

    assert.strictEqual(JSON.stringify(items), snapshot);
  });
});