import { createElement, type ComponentType } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { AbilityBindingsPanel } from "./AbilityBindingsPanel";
import { KeybindsPanel } from "./KeybindsPanel";
import { RomSkillsPanel } from "./RomSkillsPanel";

const editors: {
  Panel: ComponentType<{ open?: boolean; onClose?: () => void }>;
  title: string;
  close: string;
}[] = [
  { Panel: AbilityBindingsPanel, title: "Ability controls", close: "Close button assignments" },
  { Panel: KeybindsPanel, title: "Keybinds", close: "Close keybinds" },
  { Panel: RomSkillsPanel, title: "Skills", close: ">Close</button>" },
];

describe.each(editors)("standalone main-menu editor: $title", ({ Panel, title, close }) => {
  it("can open without changing the gameplay overlay", () => {
    const markup = renderToStaticMarkup(createElement(Panel, { open: true, onClose: () => undefined }));
    expect(markup).toContain('role="dialog"');
    expect(markup).toContain(title);
    expect(markup).toContain(close);
  });

  it("respects an explicit closed state", () => {
    expect(renderToStaticMarkup(createElement(Panel, { open: false }))).toBe("");
  });
});