import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { NumberPad } from "../../src/components/NumberPad";

describe("NumberPad", () => {
  it("marks standard and large digit layouts and exposes a full-row erase key", () => {
    const { container, rerender } = render(
      <NumberPad
        size={9}
        mode="value"
        onMode={vi.fn()}
        onValue={vi.fn()}
        onErase={vi.fn()}
      />,
    );

    expect(screen.getByRole("group", { name: "Digits" })).toHaveClass(
      "digit-pad",
    );
    expect(container.querySelector(".digit-pad")).not.toHaveClass(
      "digit-pad--wide",
    );
    expect(screen.getByRole("button", { name: "Erase" })).toHaveClass(
      "erase-key",
    );

    rerender(
      <NumberPad
        size={16}
        mode="value"
        onMode={vi.fn()}
        onValue={vi.fn()}
        onErase={vi.fn()}
      />,
    );
    expect(container.querySelector(".digit-pad")).toHaveClass(
      "digit-pad--wide",
    );
  });

  it("names each colour by both hue and pattern", async () => {
    const user = userEvent.setup();
    const onValue = vi.fn();
    const { container } = render(
      <NumberPad
        size={9}
        mode="color"
        onMode={vi.fn()}
        onValue={onValue}
        onErase={vi.fn()}
      />,
    );

    const stripes = screen.getByRole("button", {
      name: "Colour 1: red, diagonal stripes",
    });
    expect(stripes).toHaveClass("color-1");
    expect(container.querySelector(".color-8")).toHaveAccessibleName(
      "Colour 8: pink, rings",
    );
    await user.click(stripes);
    expect(onValue).toHaveBeenCalledWith(1);
  });
});