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

describe("ControlsPanel actions layout", () => {
  it("renders local action buttons as a two-column grid below their label", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                masks: {
                  actions: [
                    { label: "Rect", value: "mask.add.rectangle" },
                    { label: "Circle", value: "mask.add.circle" },
                    { label: "Tri", value: "mask.add.triangle" },
                    { label: "Delete", value: "mask.delete" },
                  ],
                  defaultValue: [],
                  label: "Masks",
                  target: "composition.masks",
                  type: "actions",
                },
              },
              title: "Composition",
            },
          ],
          title: "Controls",
        },
      },
    });
    const { container } = renderControlsPanelWithSchema(schema);
    const actionField = container.querySelector('[data-slot="actions-control"]');
    const actionButtons = container.querySelector(
      '[data-slot="actions-control-buttons"]',
    );

    expect(actionField?.getAttribute("data-orientation")).toBe("vertical");
    expect(actionField?.className).not.toContain("justify-between");
    expect(actionButtons?.className).toContain("grid");
    expect(actionButtons?.className).toContain("w-full");
    expect(actionButtons?.className).toContain("grid-cols-2");
    expect(actionButtons?.className).not.toContain("justify-start");
    expect(actionButtons?.className).not.toContain("ml-auto");
    for (const label of ["Rect", "Circle", "Tri", "Delete"]) {
      expect(screen.getByRole("button", { name: label }).className).toContain(
        "w-full",
      );
    }
  });

  it("keeps a single local action button at half row width", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                paletteActions: {
                  actions: [{ label: "Randomize", value: "palette.randomize" }],
                  defaultValue: null,
                  label: "Actions",
                  target: "palette.actions",
                  type: "actions",
                },
              },
              title: "Palette",
            },
          ],
          title: "Controls",
        },
      },
    });
    const { container } = renderControlsPanelWithSchema(schema);
    const actionButtons = container.querySelector<HTMLElement>(
      '[data-slot="actions-control-buttons"]',
    );
    const button = screen.getByRole("button", { name: "Randomize" });

    expect(actionButtons?.getAttribute("data-actions-count")).toBe("1");
    expect(actionButtons?.className).toContain("w-1/2");
    expect(actionButtons?.className).toContain("grid-cols-1");
    expect(button.className).toContain("w-full");
  });
});