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({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                position: {
                  defaultValue: { x: "0.00", y: "0.00" },
                  label: "Position",
                  target: "geometry.position",
                  type: "vector",
                },
              },
              title: "Geometry",
            },
          ],
          title: "Controls",
        },
      },
    });

    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({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                origin: {
                  defaultValue: { x: "0.00", y: "0.00" },
                  label: "Origin",
                  target: "geometry.origin",
                  type: "vector",
                },
                target: {
                  defaultValue: { x: "0.50", y: "-0.50" },
                  label: "Target",
                  target: "geometry.target",
                  type: "vector",
                },
              },
              title: "Geometry",
            },
          ],
          title: "Controls",
        },
      },
    });

    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({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                whiteBalance: {
                  defaultValue: { x: "0.00", y: "0.00" },
                  label: "White Balance",
                  target: "color.whiteBalance",
                  type: "vector",
                  variant: "whiteBalance",
                },
                colorBalance: {
                  defaultValue: { x: "0.00", y: "0.00" },
                  label: "Color Balance",
                  target: "color.balance",
                  type: "vector",
                  variant: "colorBalance",
                },
                chromaOffset: {
                  defaultValue: { x: "0.00", y: "0.00" },
                  label: "Chroma Offset",
                  target: "effect.chromaOffset",
                  type: "vector",
                  variant: "chromaOffset",
                },
                toneBias: {
                  defaultValue: { x: "0.00", y: "0.00" },
                  label: "Tone Bias",
                  target: "tone.bias",
                  type: "vector",
                  variant: "toneBias",
                },
                unknown: {
                  defaultValue: { x: "0.00", y: "0.00" },
                  label: "Unknown",
                  target: "effect.unknown",
                  type: "vector",
                  variant: "unknown",
                },
              },
              title: "Color",
            },
          ],
          title: "Controls",
        },
      },
    });

    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",
    ]);
  });
});