import { screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, describe, expect, it, vi } from "vitest";
import { DEFAULT_PREFERENCES, usePreferences } from "../src/state/preferences";
import { fakeApi, renderApp, samplePlayerState } from "./render";

const owner = () => samplePlayerState({ tutorial: null });

describe("settings screen (Step 10K.2)", () => {
  afterEach(() => {
    vi.unstubAllEnvs();
    usePreferences.getState().set(DEFAULT_PREFERENCES);
  });

  it("opens from the header gear with every section", async () => {
    renderApp(fakeApi({ getPlayerState: owner }), "/");
    await userEvent.click(await screen.findByRole("link", { name: "Settings" }));
    expect(await screen.findByRole("heading", { level: 1, name: "Settings" })).toBeInTheDocument();
    for (const section of ["Company", "Display", "Help", "About", "Developer"]) {
      expect(screen.getByRole("region", { name: section }), section).toBeInTheDocument();
    }
  });

  it("leaves out the Developer section in a production build", async () => {
    vi.stubEnv("PROD", true);
    renderApp(fakeApi({ getPlayerState: owner }), "/settings");
    await screen.findByRole("region", { name: "Display" });
    expect(screen.queryByRole("region", { name: "Developer" })).not.toBeInTheDocument();
  });

  it("saves display choices to the device preferences", async () => {
    renderApp(fakeApi({ getPlayerState: owner }), "/settings");
    const display = await screen.findByRole("region", { name: "Display" });
    await userEvent.click(within(display).getByRole("radio", { name: "24-hour" }));
    await userEvent.click(within(display).getByRole("radio", { name: "Both" }));
    expect(usePreferences.getState()).toMatchObject({ clock: "24h", countdown: "both" });
    expect(within(display).getByRole("radio", { name: "24-hour" })).toBeChecked();
  });
});