import { act, useState } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it } from "vitest";

import type { Settings } from "../../types";
import { GeneralTab } from ".";

let container: HTMLDivElement;
let root: Root | null = null;

function Harness({ initialSettings }: { initialSettings: Settings }) {
  const [settings, setSettings] = useState(initialSettings);

  return (
    <GeneralTab
      settings={settings}
      setSettings={setSettings}
      activeGeneralSubTab="layout"
      setActiveGeneralSubTab={() => {}}
      adminColor="#2563eb"
    />
  );
}

function choice(name: string): HTMLButtonElement {
  const button = Array.from(
    container.querySelectorAll<HTMLButtonElement>('[role="radio"]'),
  ).find((candidate) => candidate.textContent?.startsWith(name));

  if (!button) throw new Error(`Choice not found: ${name}`);
  return button;
}

describe("General tab Slider settings", () => {
  beforeEach(() => {
    container = document.createElement("div");
    document.body.append(container);
    root = createRoot(container);
  });

  afterEach(() => {
    act(() => root?.unmount());
    root = null;
    document.body.innerHTML = "";
  });

  it("hides selector styles and outline width for Slider", async () => {
    await act(async () => {
      root?.render(
        <Harness
          initialSettings={{
            layout: "slider",
            swatch_style: "outline",
            outline_border_width: 4,
          }}
        />,
      );
    });

    expect(container.textContent).not.toContain("Selector Style");
    expect(container.textContent).not.toContain("Outline Border Width");
  });

  it.each(["Wrap", "Grid", "Flow", "Pill"])(
    "keeps selector styles available for %s",
    async (layout) => {
      await act(async () => {
        root?.render(
          <Harness
            initialSettings={{
              layout: layout.toLowerCase() as Settings["layout"],
              swatch_style: "background",
            }}
          />,
        );
      });

      expect(container.textContent).toContain("Selector Style");
      expect(choice("Background").getAttribute("aria-checked")).toBe("true");
    },
  );

  it("preserves the saved selector style while switching through Slider", async () => {
    await act(async () => {
      root?.render(
        <Harness
          initialSettings={{ layout: "wrap", swatch_style: "background" }}
        />,
      );
    });

    await act(async () => choice("Slider").click());
    expect(container.textContent).not.toContain("Selector Style");

    await act(async () => choice("Wrap").click());
    expect(choice("Background").getAttribute("aria-checked")).toBe("true");
  });
});