// @vitest-environment jsdom
import { describe, it, expect, vi, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";

vi.mock("react-i18next", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));

import MatchToggle from "./MatchToggle";

afterEach(cleanup);

// The any/all switch sits on the panel above its picker (the owner, 2026-09-27): shown from two
// picks — with one, any and all are the same filter — as one named segment, the current mode pressed.
describe("MatchToggle", () => {
  it("draws nothing below two picks", () => {
    const { container } = render(<MatchToggle picked={1} value="any" onChange={() => {}} />);
    expect(container.innerHTML).toBe("");
  });

  it("from two picks: a named any/all group with the current mode pressed, reporting the pick", () => {
    const onChange = vi.fn();
    render(<MatchToggle picked={2} value="any" onChange={onChange} />);
    const group = screen.getByRole("group", { name: "common.matchMode" });
    expect(group.querySelector('[aria-pressed="true"]')?.textContent).toBe("common.match.any");
    fireEvent.click(screen.getByRole("button", { name: "common.match.all" }));
    expect(onChange).toHaveBeenCalledWith("all");
  });
});