// @vitest-environment jsdom
//
// The page scroller's top fade sits ON a sticky table header, so a page with one used to opt out by
// hand (`fadeTop: false` in the module registry, plus an App special case for the Channels card
// layout) — and the next table page would have re-acquired the defect with every lane green. The
// header now says so itself: while a `ColumnHead` is mounted the scroller asks for no top fade.
import { afterEach, describe, expect, it, vi } from "vitest";
import { cleanup, render } from "@testing-library/react";

const fadeTopArgs: boolean[] = [];
vi.mock("../../lib/useScrollFade", () => ({
  useScrollFade: (_px: number, fadeTop: boolean) => {
    fadeTopArgs.push(fadeTop);
    return { ref: () => {}, style: {} };
  },
}));
vi.mock("react-i18next", async (importOriginal) => {
  const actual = await importOriginal<typeof import("react-i18next")>();
  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
});

import PageScroller from "./PageScroller";
import { ColumnHead } from "./tableHeader";

const last = () => fadeTopArgs[fadeTopArgs.length - 1];

afterEach(() => {
  cleanup();
  fadeTopArgs.length = 0;
});

function page(withTable: boolean) {
  return (
    <PageScroller scrollKey="k">
      {withTable ? (
        <table>
          <ColumnHead
            columns={[]}
            sort={null}
            onToggleSort={() => {}}
            filters={{}}
            onFilter={() => {}}
          />
        </table>
      ) : (
        <div>cards</div>
      )}
    </PageScroller>
  );
}

describe("the page scroller's top fade and a sticky table header", () => {
  it("is off while the header is mounted, and back on the moment it is gone", () => {
    const view = render(page(true));
    expect(last()).toBe(false);
    view.rerender(page(false)); // e.g. the Channels card layout, or a narrow DataTable
    expect(last()).toBe(true);
  });

  it("is on for a page with no sticky header at all", () => {
    render(page(false));
    expect(last()).toBe(true);
  });
});