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

describe("ControlsPanel source collection", () => {
  it("renders source-sized built-in color controls without cardinality actions", () => {
    const schema = defineToolcraft({
      base: {
        identity: { id: "runtime-test", title: "Toolcraft App" },
        canvas: { enabled: false },
        panels: {
          controls: {
            sections: [
              {
                id: "test-section-1",
                controls: {
                  sections: {
                    applicability: { mode: "always" as const },
                    defaultValue: ["#DFFF1A", "#8CFF3A"],
                    itemControl: {
                      label: "Section",
                      type: "color",
                    },
                    label: "Sections",
                    target: "fills.sections",
                    type: "sourceCollection",
                  },
                },
                title: "Fill Sections",
              },
            ],
            title: "Controls",
          },
        },
      },
      modules: [],
    });

    const { container } = renderControlsPanelWithSchema(schema);

    expect(screen.queryByRole("button", { name: /Add/u })).toBeNull();
    expect(screen.queryByRole("button", { name: /Remove/u })).toBeNull();
    expect(screen.getByRole("button", { name: "Pick Section 1" })).toBeTruthy();
    expect(screen.getByRole("textbox", { name: "Section 2 hex" })).toBeTruthy();
    expect(
      container.querySelector('[data-slot="source-collection-items-grid"]')
        ?.children,
    ).toHaveLength(2);

    const secondColor = screen.getByRole("textbox", { name: "Section 2 hex" });

    fireEvent.change(secondColor, { target: { value: "#123456" } });
    fireEvent.blur(secondColor);

    const values = JSON.parse(
      screen.getByTestId("values-json").textContent ?? "{}",
    );

    expect(values["fills.sections"]).toEqual(["#DFFF1A", "#123456"]);
  });
});