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

describe("ControlsPanel vector pad layout", () => {
  it("uses a square vector pad when vector is the only vector control in the panel", () => {
    const schema = defineToolcraft({
      base: {
        identity: { id: "runtime-test", title: "Toolcraft App" },
        canvas: { enabled: true },
        panels: {
          controls: {
            sections: [
              {
                id: "test-section-1",
                controls: {
                  position: {
                    applicability: { mode: "always" as const },
                    defaultValue: { x: "0.00", y: "0.00" },
                    label: "Position",
                    target: "geometry.position",
                    type: "vector",
                  },
                },
                title: "Geometry",
              },
            ],
            title: "Controls",
          },
        },
      },
      modules: [],
    });

    const { container } = renderControlsPanelWithSchema(schema);

    expect(
      container
        .querySelector('[aria-label="Position X/Y pad"]')
        ?.getAttribute("data-vector-pad-shape"),
    ).toBe("square");
  });

  it("keeps compact vector pads when the panel has multiple vector controls", () => {
    const schema = defineToolcraft({
      base: {
        identity: { id: "runtime-test", title: "Toolcraft App" },
        canvas: { enabled: true },
        panels: {
          controls: {
            sections: [
              {
                id: "test-section-2",
                controls: {
                  origin: {
                    applicability: { mode: "always" as const },
                    defaultValue: { x: "0.00", y: "0.00" },
                    label: "Origin",
                    target: "geometry.origin",
                    type: "vector",
                  },
                  target: {
                    applicability: { mode: "always" as const },
                    defaultValue: { x: "0.50", y: "-0.50" },
                    label: "Target",
                    target: "geometry.target",
                    type: "vector",
                  },
                },
                title: "Geometry",
              },
            ],
            title: "Controls",
          },
        },
      },
      modules: [],
    });

    const { container } = renderControlsPanelWithSchema(schema);

    expect(
      [...container.querySelectorAll("[data-vector-pad-shape]")].map((pad) =>
        pad.getAttribute("data-vector-pad-shape"),
      ),
    ).toEqual(["compact", "compact"]);
  });

  it("passes supported vector pad variants from schema to the vector pad", () => {
    const schema = defineToolcraft({
      base: {
        identity: { id: "runtime-test", title: "Toolcraft App" },
        canvas: { enabled: true },
        panels: {
          controls: {
            sections: [
              {
                id: "test-section-3",
                controls: {
                  whiteBalance: {
                    applicability: { mode: "always" as const },
                    defaultValue: { x: "0.00", y: "0.00" },
                    label: "White Balance",
                    target: "color.whiteBalance",
                    type: "vector",
                    variant: "whiteBalance",
                  },
                  colorBalance: {
                    applicability: { mode: "always" as const },
                    defaultValue: { x: "0.00", y: "0.00" },
                    label: "Color Balance",
                    target: "color.balance",
                    type: "vector",
                    variant: "colorBalance",
                  },
                  chromaOffset: {
                    applicability: { mode: "always" as const },
                    defaultValue: { x: "0.00", y: "0.00" },
                    label: "Chroma Offset",
                    target: "effect.chromaOffset",
                    type: "vector",
                    variant: "chromaOffset",
                  },
                  toneBias: {
                    applicability: { mode: "always" as const },
                    defaultValue: { x: "0.00", y: "0.00" },
                    label: "Tone Bias",
                    target: "tone.bias",
                    type: "vector",
                    variant: "toneBias",
                  },
                  unknown: {
                    applicability: { mode: "always" as const },
                    defaultValue: { x: "0.00", y: "0.00" },
                    label: "Unknown",
                    target: "effect.unknown",
                    type: "vector",
                    variant: "unknown",
                  },
                },
                title: "Color",
              },
            ],
            title: "Controls",
          },
        },
      },
      modules: [],
    });

    const { container } = renderControlsPanelWithSchema(schema);

    expect(
      [...container.querySelectorAll("[data-vector-pad-variant]")].map((pad) =>
        pad.getAttribute("data-vector-pad-variant"),
      ),
    ).toEqual([
      "whiteBalance",
      "colorBalance",
      "chromaOffset",
      "toneBias",
      "default",
    ]);
    expect(
      [...container.querySelectorAll("[data-vector-pad-coordinate-mode]")].map(
        (pad) => pad.getAttribute("data-vector-pad-coordinate-mode"),
      ),
    ).toEqual(["cartesian", "cartesian", "cartesian", "cartesian", "screen"]);
  });
});