import { describe, expect, test, vi } from "vitest";
import { act, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { NotificationBell } from "../../../components/layout/NotificationBell.tsx";
import { makeNotification } from "../../fixtures.ts";
import { currentPath, renderWithContexts } from "../../render.tsx";
import { defaultWSValue, WSContext } from "../../../contexts/WSContext.ts";

describe("NotificationBell", () => {
  test("the bell shows the unread count and goes to notifications", async () => {
    const user = userEvent.setup();
    renderWithContexts(<NotificationBell />, {
      ws: { unreadNotificationCount: 120 },
    });
    const bell = screen.getByRole("button", {
      name: "Notifications (120 unread)",
    });
    expect(bell).toHaveTextContent("99+");
    await user.click(bell);
    expect(currentPath()).toBe("/notifications");
  });

  test("the bell rings for a new notification, not for one already there", () => {
    vi.useFakeTimers();
    try {
      const n1 = makeNotification({ id: "n1" });
      const withLast = (n: ReturnType<typeof makeNotification>) => (
        <WSContext.Provider
          value={{ ...defaultWSValue, lastNotification: n }}
        >
          <NotificationBell />
        </WSContext.Provider>
      );
      const { rerender } = renderWithContexts(withLast(n1));
      const bell = () => screen.getByRole("button", { name: "Notifications" });
      act(() => vi.advanceTimersByTime(10));
      expect(bell()).not.toHaveClass("notification-bell--ringing");
      rerender(withLast(makeNotification({ id: "n2" })));
      act(() => vi.advanceTimersByTime(10));
      expect(bell()).toHaveClass("notification-bell--ringing");
      act(() => vi.advanceTimersByTime(700));
      expect(bell()).not.toHaveClass("notification-bell--ringing");
    } finally {
      vi.useRealTimers();
    }
  });
});