// @vitest-environment jsdom
//
// A reload under a dialog that does not reopen (About) loads on the dialog's entry, its overlay mark
// still on it. A view rewritten in place there (the search refined) is another view: the next overlay
// pushes its own entry over it rather than taking this one over — taken over, closing it stepped back
// onto the entry below, and the screen went back to the search before the refine. Its own file: the
// entry is read as the history module loads, so it is set up before the import.
import { describe, expect, it, vi } from "vitest";
import { act, renderHook } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { ReactNode } from "react";

vi.mock("react-i18next", async (importOriginal) => ({
  ...(await importOriginal<typeof import("react-i18next")>()),
  useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
}));

describe("a view rewritten in place on the entry a reload under a dialog started from", () => {
  it("is where an overlay over it closes to", async () => {
    window.history.replaceState({ sfPage: "feed", _yt: "dogs" }, "", "/?page=feed&yt=dogs");
    window.history.pushState(
      { sfPage: "feed", _yt: "dogs", _ov: 1, _ovd: 1 },
      "",
      "/?page=feed&yt=dogs",
    );
    const { NavigationProvider } = await import("./NavigationProvider");
    const { useNavigation, useNavigationActions } = await import("./navigationContext");
    const { useBackToClose } = await import("../../lib/history");
    const { qk } = await import("../../lib/queryKeys");
    const { claimLocalData } = await import("../../lib/storage");
    const qc = new QueryClient();
    qc.setQueryData(qk.me(), { id: 1, role: "admin" });
    claimLocalData(1);
    const wrapper = ({ children }: { children: ReactNode }) => (
      <QueryClientProvider client={qc}>
        <NavigationProvider>{children}</NavigationProvider>
      </QueryClientProvider>
    );
    const nav = renderHook(() => ({ ...useNavigation(), ...useNavigationActions() }), { wrapper });
    act(() => nav.result.current.enterYtSearch("cats"));

    const depth = window.history.length;
    const overlay = renderHook(() => useBackToClose(() => {}));
    await act(async () => {
      await Promise.resolve();
    });
    expect(window.history.length).toBe(depth + 1);

    await act(async () => {
      const landed = new Promise((res) => window.addEventListener("popstate", res, { once: true }));
      overlay.unmount();
      await landed;
    });
    expect(new URLSearchParams(window.location.search).get("yt")).toBe("cats");
    expect(nav.result.current.ytSearch).toBe("cats");
  }, 30_000); // the provider's whole import graph loads inside the case (see the header)
});