import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { PROBLEMAS } from "@/lib/jogo/problemas";
import Inicio from "./Inicio";

function montar(extra: Partial<Parameters<typeof Inicio>[0]> = {}) {
  const aoComecar = jest.fn();
  render(
    <Inicio
      aoComecar={aoComecar}
      toque={false}
      movimentoReduzido={false}
      semWebgl={false}
      {...extra}
    />,
  );
  return aoComecar;
}

describe("Inicio", () => {
  it("mostra o nome, a frase e o aviso", () => {
    montar();
    expect(
      screen.getByRole("heading", { level: 1, name: "Expediente dos Mortos" }),
    ).toBeInTheDocument();
    expect(
      screen.getByText("Os problemas da sua empresa não morrem sozinhos."),
    ).toBeInTheDocument();
    expect(
      screen.getByText("Tem sangue e sustos. É um jogo de tiro."),
    ).toBeInTheDocument();
  });

  it("deixa Começar desabilitado, com o motivo, até escolher o problema", async () => {
    const aoComecar = montar();
    const botao = screen.getByRole("button", { name: "Começar" });
    expect(botao).toBeDisabled();
    expect(botao).toHaveAccessibleDescription(
      "Escolha o problema do chefão para começar.",
    );
    expect(
      screen
        .getAllByRole("radio", { checked: true })
        .map((r) => r.getAttribute("name")),
    ).toEqual(["dificuldade"]);
    await userEvent.click(botao);
    expect(aoComecar).not.toHaveBeenCalled();
  });

  it("passa o problema e a dificuldade ao começar (Fácil por padrão)", async () => {
    const aoComecar = montar();
    const alvo = PROBLEMAS[3];
    await userEvent.click(screen.getByRole("radio", { name: alvo.nome }));
    await userEvent.click(screen.getByRole("button", { name: "Começar" }));
    expect(aoComecar).toHaveBeenCalledWith({
      problemaId: alvo.id,
      dificuldade: "facil",
    });
  });

  it("envia a dificuldade escolhida", async () => {
    const aoComecar = montar();
    await userEvent.click(screen.getByRole("radio", { name: /Difícil/ }));
    await userEvent.click(
      screen.getByRole("radio", { name: PROBLEMAS[0].nome }),
    );
    await userEvent.click(screen.getByRole("button", { name: "Começar" }));
    expect(aoComecar).toHaveBeenCalledWith({
      problemaId: PROBLEMAS[0].id,
      dificuldade: "dificil",
    });
  });

  it("explica os controles de teclado e mouse ou os de toque", () => {
    const { unmount } = render(
      <Inicio
        aoComecar={jest.fn()}
        toque={false}
        movimentoReduzido={false}
        semWebgl={false}
      />,
    );
    expect(screen.getByText(/W A S D/)).toBeInTheDocument();
    unmount();
    montar({ toque: true });
    expect(screen.getByText(/polegar esquerdo anda/i)).toBeInTheDocument();
    expect(screen.queryByText(/W A S D/)).not.toBeInTheDocument();
  });

  it("sem WebGL troca o botão pelo aviso", () => {
    montar({ semWebgl: true });
    expect(
      screen.queryByRole("button", { name: /Começar|Jogar mesmo assim/ }),
    ).not.toBeInTheDocument();
    expect(
      screen.getByText(
        "Este navegador não desenha 3D. Veja os problemas e as soluções abaixo.",
      ),
    ).toBeInTheDocument();
  });

  it("com movimento reduzido avisa e o botão vira Jogar mesmo assim", () => {
    montar({ movimentoReduzido: true });
    expect(screen.getByText(/movimento intenso/)).toBeInTheDocument();
    expect(
      screen.getByRole("button", { name: "Jogar mesmo assim" }),
    ).toBeInTheDocument();
    expect(
      screen.queryByRole("button", { name: "Começar" }),
    ).not.toBeInTheDocument();
  });

  it("mostra o resumo da escolha ao lado do Começar", async () => {
    montar();
    const alvo = PROBLEMAS[2];
    await userEvent.click(screen.getByRole("radio", { name: /Normal/ }));
    await userEvent.click(screen.getByRole("radio", { name: alvo.nome }));
    expect(
      screen.getByText(`${alvo.nome} · Normal`, { exact: false }),
    ).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Começar" })).toBeEnabled();
  });

  it("dá a cada dificuldade a sua explicação", () => {
    montar();
    expect(
      screen.getByRole("radio", { name: "Difícil" }),
    ).toHaveAccessibleDescription(
      "Zumbis mais rápidos, mais numerosos e que machucam mais.",
    );
  });

  it("abre e fecha as áreas da sanfona, com a primeira aberta", async () => {
    montar();
    const primeira = screen.getByRole("button", {
      name: "Vender e ser encontrado",
    });
    const segunda = screen.getByRole("button", { name: "Atender" });
    expect(primeira).toHaveAttribute("aria-expanded", "true");
    expect(segunda).toHaveAttribute("aria-expanded", "false");
    await userEvent.click(segunda);
    expect(segunda).toHaveAttribute("aria-expanded", "true");
    await userEvent.click(primeira);
    expect(primeira).toHaveAttribute("aria-expanded", "false");
  });

  it("usa a capa como imagem decorativa", () => {
    const { container } = render(
      <Inicio
        aoComecar={jest.fn()}
        toque={false}
        movimentoReduzido={false}
        semWebgl={false}
      />,
    );
    const capa = container.querySelector("img");
    expect(capa).toHaveAttribute("alt", "");
    expect(capa?.getAttribute("src")).toContain("capa.jpg");
  });
});