// @vitest-environment jsdom
//
// Owner's call: a page's sub-tab was remembered forever in localStorage, so every fresh browser tab
// opened Configuration on "Plex" as if that were its home. The position is now kept per browser tab
// (sessionStorage): it survives a reload and a trip to another page, and a new tab starts on the first.
import { afterEach, beforeEach, describe, expect, it } from "vitest";
import { act, renderHook } from "@testing-library/react";
import { claimLocalData, setTabRaw, useTabPersistedState } from "./storage";

beforeEach(() => {
  claimLocalData(1);
});
afterEach(() => {
  sessionStorage.clear();
  localStorage.clear();
});

describe("a page's sub-tab, per browser tab", () => {
  it("starts on the fallback, then keeps the picked tab for this browser tab only", () => {
    const first = renderHook(() => useTabPersistedState("siftlode.configTab", "access"));
    expect(first.result.current[0]).toBe("access");
    act(() => first.result.current[1]("plex"));
    expect(sessionStorage.getItem("siftlode.configTab")).toBe("plex");
    expect(localStorage.getItem("siftlode.configTab")).toBeNull();
    // The page mounts again in this tab (a reload, or back from another page): it is where it was.
    first.unmount();
    expect(
      renderHook(() => useTabPersistedState("siftlode.configTab", "access")).result.current[0],
    ).toBe("plex");
  });

  it("ignores a position left in localStorage by an older build, and clears it", () => {
    localStorage.setItem("siftlode.configTab", "plex");
    const { result } = renderHook(() => useTabPersistedState("siftlode.configTab", "access"));
    expect(result.current[0]).toBe("access");
    expect(localStorage.getItem("siftlode.configTab")).toBeNull();
  });

  it("a pre-selected tab is the one the page opens on", () => {
    setTabRaw("siftlode.adminUsersTab", "access");
    const { result } = renderHook(() => useTabPersistedState("siftlode.adminUsersTab", "roles"));
    expect(result.current[0]).toBe("access");
  });

  it("opens on the tab the address names, and keeps it for this browser tab", () => {
    setTabRaw("siftlode.settingsTab", "account");
    window.history.replaceState(null, "", "/?page=settings&stab=tokens");
    const { result, unmount } = renderHook(() =>
      useTabPersistedState("siftlode.settingsTab", "appearance", "stab"),
    );
    expect(result.current[0]).toBe("tokens");
    unmount();
    // Back on the page later, through the rail (the page switch cleared its address).
    window.history.replaceState(null, "", "/?page=settings");
    expect(
      renderHook(() => useTabPersistedState("siftlode.settingsTab", "appearance", "stab")).result
        .current[0],
    ).toBe("tokens");
    window.history.replaceState(null, "", "/");
  });
});