import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { Art, Button, Meter, ScreenHeader, Sheet, spriteUrl } from "../src/ui";

describe("UI kit (Step 10E.2)", () => {
  it("buttons default to type=button and forward disabled and clicks", async () => {
    const onClick = vi.fn();
    const { rerender } = render(<Button onClick={onClick}>Go</Button>);
    const button = screen.getByRole("button", { name: "Go" });
    expect(button).toHaveAttribute("type", "button");
    await userEvent.click(button);
    expect(onClick).toHaveBeenCalledOnce();

    rerender(
      <Button onClick={onClick} disabled>
        Go
      </Button>,
    );
    expect(screen.getByRole("button", { name: "Go" })).toBeDisabled();
  });

  it("meters expose their range and value", () => {
    render(<Meter label="Duty" value={9} max={14} />);
    const bar = screen.getByRole("progressbar", { name: "Duty" });
    expect(bar).toHaveAttribute("aria-valuemin", "0");
    expect(bar).toHaveAttribute("aria-valuemax", "14");
    expect(bar).toHaveAttribute("aria-valuenow", "9");
  });

  it("sheets are modal dialogs labelled by their title", () => {
    render(
      <Sheet titleId="t" title="Deliver to which HQ?">
        <p>Body</p>
      </Sheet>,
    );
    const dialog = screen.getByRole("dialog", { name: "Deliver to which HQ?" });
    expect(dialog).toHaveAttribute("aria-modal", "true");
    expect(screen.getByRole("heading", { level: 2, name: "Deliver to which HQ?" })).toBeVisible();
  });

  it("the screen header is the level-1 heading", () => {
    render(<ScreenHeader title="Fleet" eyebrow="Your ships" />);
    expect(screen.getByRole("heading", { level: 1, name: "Fleet" })).toBeInTheDocument();
  });

  it("art loads the generated sprite and hides itself if it fails", () => {
    const { container } = render(<Art sprite="ship-courier" />);
    const img = container.querySelector("img")!;
    expect(img).toHaveAttribute("src", spriteUrl("ship-courier", "1x"));
    expect(img).toHaveAttribute("alt", "");
    expect(img.getAttribute("srcset")).toContain("/assets/map-gen/ship-courier@2x.png 2x");
    fireEvent.error(img);
    expect(container.querySelector("img")).toBeNull();
  });
});