import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it } from "vitest";
import { DEFAULT_CAMERA, framed, useMapFrame } from "../src/map/camera";
import { fakeApi, renderApp, samplePlayerState } from "./render";

const app = () => fakeApi({ getPlayerState: () => samplePlayerState({ tutorial: null }) });

describe("the shell (decision 0.5.166)", () => {
  it("steps the panel through its heights by tap or keyboard, never needing a drag", async () => {
    renderApp(app());
    const handle = await screen.findByRole("button", { name: /Panel height: half/ });
    await userEvent.click(handle);
    expect(handle).toHaveAccessibleName(/Panel height: full/);
    await userEvent.click(handle);
    expect(handle).toHaveAccessibleName(/Panel height: peek/);
    await userEvent.click(handle);
    expect(handle).toHaveAccessibleName(/Panel height: half/);
  });

  it("opens tall screens tall", async () => {
    renderApp(app(), "/settings");
    expect(await screen.findByRole("button", { name: /Panel height: full/ })).toBeInTheDocument();
  });

  it("keeps the map mounted across screens", async () => {
    renderApp(app());
    const canvas = await screen.findByTestId("map-canvas");
    await userEvent.click(screen.getByRole("link", { name: "More" }));
    await screen.findByRole("heading", { level: 1, name: "More" });
    expect(screen.getByTestId("map-canvas")).toBe(canvas);
  });

  it("shifts the view by the frame without touching the saved camera", () => {
    useMapFrame.setState({ offsetX: 10, offsetY: -20 });
    expect(framed(DEFAULT_CAMERA, useMapFrame.getState())).toEqual({
      ...DEFAULT_CAMERA,
      panX: 10,
      panY: -20,
    });
    expect(DEFAULT_CAMERA.panX).toBe(0);
    useMapFrame.setState({ offsetX: 0, offsetY: 0 });
  });
});