import { cleanup, render, waitFor } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";
import Preview, { type PreviewProps } from "./Preview";
import type { Settings } from "../types";

function buildProps(rawSettings: Settings): PreviewProps {
  return {
    rawSettings,
    showLabels: true,
    showLabelsColors: false,
    enableTooltips: false,
    layoutPaddingTop: 0,
    layoutPaddingRight: 0,
    layoutPaddingBottom: 0,
    layoutPaddingLeft: 0,
    labelFontSize: 14,
    labelTextColor: "",
    mode: "colors",
    selectedColor: "#46a5e5",
    swatchWidth: 32,
    swatchHeight: 32,
    swatchGap: 8,
    selectedIndex: 0,
    onSelectIndex: () => {},
  };
}

function getRadio(container: HTMLElement, value: string): HTMLElement {
  const radio = container.querySelector<HTMLElement>(
    `[data-b3-wvs-radio-value="${value}"]`,
  );
  if (!radio) throw new Error(`Missing radio for ${value}`);
  return radio;
}

afterEach(() => {
  cleanup();
  document.body.innerHTML = "";
});

describe("admin Live Preview dual-color demo coverage", () => {
  it("keeps every Color sample single-color while dual color is disabled", async () => {
    const { container } = render(
      <Preview {...buildProps({ dual_color_enabled: false })} />,
    );

    await waitFor(() => getRadio(container, "peach"));
    for (const value of [
      "green",
      "peach",
      "charcoal",
      "sky",
      "lemon",
      "mint",
    ]) {
      expect(getRadio(container, value).style.backgroundImage).toBe("");
      expect(getRadio(container, value).style.backgroundColor).not.toBe("");
    }
  });

  it("shows the draft dual-color cut and gradient on the two-tone samples", async () => {
    const { container, rerender } = render(
      <Preview
        {...buildProps({
          dual_color_enabled: true,
          dual_color_cut: "vertical",
          dual_color_gradient: "none",
        })}
      />,
    );

    await waitFor(() =>
      expect(getRadio(container, "peach").style.backgroundImage).toContain(
        "linear-gradient(90deg",
      ),
    );
    expect(getRadio(container, "sky").style.backgroundImage).toContain(
      "linear-gradient(90deg",
    );
    // Single-color samples are unchanged by the toggle.
    expect(getRadio(container, "green").style.backgroundImage).toBe("");

    rerender(
      <Preview
        {...buildProps({
          dual_color_enabled: true,
          dual_color_cut: "horizontal",
          dual_color_gradient: "gentle",
        })}
      />,
    );

    await waitFor(() => {
      const image = getRadio(container, "peach").style.backgroundImage;
      expect(image).toContain("linear-gradient(180deg");
      expect(image).toContain("25%");
      expect(image).toContain("75%");
    });
  });
});