import { describe, it, expect } from "vitest";
import userEvent from "@testing-library/user-event";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import { CommunitySizeSelectScreen } from "../../app/(app)/create/screens/select/CommunitySizeSelectScreen";

const BANDS = [
  "One member",
  "2 to 5",
  "6 to 12",
  "13 to 100",
  "More than 100",
] as const;

describe("CommunitySizeSelectScreen", () => {
  it("renders HeaderLockup title", () => {
    render(<CommunitySizeSelectScreen />);
    expect(
      screen.getByRole("heading", {
        name: "How many people will be in your community in the near term?",
      }),
    ).toBeInTheDocument();
  });

  it("asks groups to count people who have a say", () => {
    render(<CommunitySizeSelectScreen />);
    expect(
      screen.getByText(
        "Count the people who have a say in your big decisions. If others take part without a vote, you can say so later in setup.",
      ),
    ).toBeInTheDocument();
  });

  it("renders the five size bands", () => {
    render(<CommunitySizeSelectScreen />);
    for (const label of BANDS) {
      expect(
        screen.getByRole("button", { name: `Select ${label}` }),
      ).toBeInTheDocument();
    }
  });

  it("keeps a single band selected", async () => {
    const user = userEvent.setup();
    render(<CommunitySizeSelectScreen />);

    await user.click(screen.getByRole("button", { name: "Select 13 to 100" }));
    expect(
      screen.getByRole("button", { name: "Deselect 13 to 100" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("button", { name: "Select More than 100" }),
    ).toBeInTheDocument();

    await user.click(
      screen.getByRole("button", { name: "Select More than 100" }),
    );
    expect(
      screen.getByRole("button", { name: "Deselect More than 100" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("button", { name: "Select 13 to 100" }),
    ).toBeInTheDocument();
  });
});