import { describe, expect, it } from "vitest";
import {
  defineToolcraft,
  renderControlsPanelWithSchema,
  screen,
} from "../testing/controls-panel-test-utils";

describe("ControlsPanel help policy", () => {
  it("suppresses obvious help icons in sequential color sections", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                color1: {
                  defaultValue: { hex: "#DFFF1A" },
                  description: "Sets the first bead color.",
                  label: "Color 1",
                  target: "palette.accent1",
                  type: "color",
                },
                color2: {
                  defaultValue: { hex: "#8CFF3A" },
                  description: "Sets the second bead color.",
                  label: "Color 2",
                  target: "palette.accent2",
                  type: "color",
                },
                color3: {
                  defaultValue: { hex: "#F4FF5A" },
                  description: "Sets the third bead color.",
                  label: "Color 3",
                  target: "palette.accent3",
                  type: "color",
                },
                color4: {
                  defaultValue: { hex: "#B8FF2E" },
                  description: "Sets the fourth bead color.",
                  label: "Color 4",
                  target: "palette.accent4",
                  type: "color",
                },
                color5: {
                  defaultValue: { hex: "#ECFF68" },
                  description: "Sets the fifth bead color.",
                  label: "Color 5",
                  target: "palette.accent5",
                  type: "color",
                },
                colorSpread: {
                  defaultValue: 34,
                  description:
                    "Controls how often beads use colors 2-5 instead of Color 1.",
                  label: "Spread",
                  max: 100,
                  min: 0,
                  target: "palette.spread",
                  type: "slider",
                  unit: "%",
                },
              },
              layoutGroups: [
                {
                  columns: 2,
                  controls: ["color1", "color2"],
                  layout: "inline",
                },
                {
                  columns: 2,
                  controls: ["color3", "color4"],
                  layout: "inline",
                },
              ],
              title: "Accent Shades",
            },
            {
              controls: {
                includeBackground: {
                  defaultValue: true,
                  description:
                    "Controls PNG background transparency while preview and video keep the background.",
                  label: "Include",
                  target: "export.includeBackground",
                  type: "switch",
                },
              },
              title: "Background",
            },
          ],
          title: "Controls",
        },
      },
    });

    renderControlsPanelWithSchema(schema);

    expect(screen.queryByRole("button", { name: "Color 5 help" })).toBeNull();
    expect(screen.queryByRole("button", { name: "Spread help" })).toBeNull();
    expect(screen.getByRole("button", { name: "Include help" })).toBeTruthy();
  });
});