// @vitest-environment jsdom
//
// The `list` key scope — what puts j/k, the arrows and Enter on the cheat sheet — is live only while a
// registered list has an item to land on. An empty download queue, a list still loading or one that
// failed mounts its container all the same, and the sheet listed the keys over nothing (deep-review
// E11 round 2). Its own file: listNav keeps module state.
import { useRef } from "react";
import { afterEach, describe, expect, it } from "vitest";
import { cleanup, render, screen, waitFor } from "@testing-library/react";
import { navItemAttrs, useListNav } from "./listNav";
import { useActiveScopes } from "./keymap";

afterEach(cleanup);

function Scopes() {
  return <output data-testid="scopes">{useActiveScopes().join(" ")}</output>;
}

function Queue({ count, onDelete }: { count: number; onDelete?: (i: number) => void }) {
  const ref = useRef<HTMLDivElement>(null);
  useListNav(ref, { enabled: true, onDelete });
  return (
    <div ref={ref}>
      {count === 0 ? (
        <p>Nothing queued</p>
      ) : (
        Array.from({ length: count }, (_, i) => (
          <div key={i} {...navItemAttrs(i)}>
            item
          </div>
        ))
      )}
    </div>
  );
}

const page = (count: number, onDelete?: (i: number) => void) => (
  <>
    <Scopes />
    <Queue count={count} onDelete={onDelete} />
  </>
);
const scopes = () => screen.getByTestId("scopes").textContent!.split(" ");

describe("useListNav · the list key scope", () => {
  it("is not live over a list with nothing in it, and is while it has items", async () => {
    const { rerender } = render(page(0));
    expect(scopes()).not.toContain("list");
    rerender(page(2));
    await waitFor(() => expect(scopes()).toContain("list"));
    rerender(page(0));
    await waitFor(() => expect(scopes()).not.toContain("list"));
  });

  // E28 S3e2: Delete is on the sheet only where a list can take an item out — a playlist's rows, not
  // the feed or a Plex grid, where nothing answers it.
  it("puts Delete on the sheet only for a list that removes items", async () => {
    const { rerender } = render(page(2));
    await waitFor(() => expect(scopes()).toContain("list"));
    expect(scopes()).not.toContain("listDelete");
    rerender(page(2, () => {}));
    await waitFor(() => expect(scopes()).toContain("listDelete"));
    rerender(page(0, () => {}));
    await waitFor(() => expect(scopes()).not.toContain("listDelete"));
  });
});