// @vitest-environment jsdom
//
// The tab rail was a row of `aria-pressed` toggle buttons — every tab a Tab stop, no
// arrow keys, and nothing tying a tab to the content it shows. It is an ARIA tab list now.
import { useState } from "react";
import { afterEach, describe, expect, it } from "vitest";
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import Tabs from "./Tabs";
import { useTabPanel } from "./tabPanel";

afterEach(cleanup);

const TABS = [
  { id: "a", label: "Alpha" },
  { id: "b", label: "Beta" },
  { id: "c", label: "Gamma" },
];

function Harness() {
  const [active, setActive] = useState("a");
  const panel = useTabPanel();
  return (
    <>
      <Tabs idBase={panel.idBase} tabs={TABS} active={active} onChange={setActive} label="Pick" />
      <div {...panel.panelProps(active)}>content of {active}</div>
    </>
  );
}

const tab = (name: string) => screen.getByRole("tab", { name });

describe("Tabs", () => {
  it("is a tab list with one Tab stop, the selected tab", () => {
    render(<Harness />);
    expect(screen.getByRole("tablist", { name: "Pick" })).toBeTruthy();
    expect(tab("Alpha").getAttribute("aria-selected")).toBe("true");
    expect(tab("Beta").getAttribute("aria-selected")).toBe("false");
    expect(TABS.map((t) => tab(t.label).tabIndex)).toEqual([0, -1, -1]);
  });

  it("moves and selects with the arrows, and Home/End jump to the ends", () => {
    render(<Harness />);
    tab("Alpha").focus();
    fireEvent.keyDown(document.activeElement!, { key: "ArrowRight" });
    expect(document.activeElement).toBe(tab("Beta"));
    expect(tab("Beta").getAttribute("aria-selected")).toBe("true");
    fireEvent.keyDown(document.activeElement!, { key: "End" });
    expect(document.activeElement).toBe(tab("Gamma"));
    fireEvent.keyDown(document.activeElement!, { key: "ArrowRight" }); // wraps
    expect(document.activeElement).toBe(tab("Alpha"));
    fireEvent.keyDown(document.activeElement!, { key: "ArrowUp" }); // either axis
    expect(document.activeElement).toBe(tab("Gamma"));
    fireEvent.keyDown(document.activeElement!, { key: "Home" });
    expect(tab("Alpha").getAttribute("aria-selected")).toBe("true");
  });

  it("ties each tab to the panel, and the panel to the selected tab", () => {
    render(<Harness />);
    const panel = screen.getByRole("tabpanel");
    expect(tab("Beta").getAttribute("aria-controls")).toBe(panel.id);
    fireEvent.click(tab("Beta"));
    expect(screen.getByRole("tabpanel", { name: "Beta" })).toBe(panel);
  });

  it("on the media chrome marks the chosen tab in white with the chosen mark, not the accent's text", () => {
    // A light theme's accent is dark on the always-dark chrome (Slate 2.84:1 as text).
    render(<Tabs tabs={TABS} active="a" onChange={() => {}} label="Pick" tone="media" />);
    const on = tab("Alpha").className;
    expect(on).not.toMatch(/\btext-accent\b/);
    expect(on).toMatch(/\btext-white\b/);
    // The scope's own `--chosen`, read where it is used: `--color-chosen` is resolved once on :root
    // and would stay the accent under `media-marks`.
    expect(on).toMatch(/var\(--chosen,/);
    expect(on).not.toMatch(/--color-chosen/);
  });
});