import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { DEFAULT_COMBAT_PRESENTATION_SETTINGS, type CombatVfxMode } from "../game/combatPresentation";
import { DEFAULT_GAMEPLAY_SETTINGS } from "../game/combatStore";
import { OptionsPanel, nextCombatVfxMode } from "./OptionsPanel";

function renderOptions(mode: CombatVfxMode): string {
  return renderToStaticMarkup(createElement(OptionsPanel, {
    settings: DEFAULT_GAMEPLAY_SETTINGS,
    onChange: () => undefined,
    onReset: () => undefined,
    presentationSettings: { ...DEFAULT_COMBAT_PRESENTATION_SETTINGS, vfxMode: mode },
    onPresentationChange: () => undefined,
    onPresentationReset: () => undefined,
    open: true,
    onClose: () => undefined,
  }));
}

describe("combat visual mode option", () => {
  it("cycles between generated and strict original selections", () => {
    expect(nextCombatVfxMode("generated")).toBe("original");
    expect(nextCombatVfxMode("original")).toBe("generated");
  });

  it("renders generated as the default selection", () => {
    const markup = renderOptions(DEFAULT_COMBAT_PRESENTATION_SETTINGS.vfxMode);

    expect(markup).toContain("Spell visual mode");
    expect(markup).toContain("Use the current generated combat effects.");
    expect(markup).toContain(">Generated</button>");
  });

  it("states that original mode never substitutes generated effects", () => {
    const markup = renderOptions("original");

    expect(markup).toContain("Use only packaged original source effects.");
    expect(markup).toContain("Unsupported spells show no visual effect.");
    expect(markup).toContain(">Original</button>");
  });
});