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({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                sections: {
                  defaultValue: [{ hex: "#DFFF1A" }, { hex: "#8CFF3A" }],
                  itemControl: {
                    label: "Section",
                    type: "color",
                  },
                  label: "Sections",
                  target: "fills.sections",
                  type: "sourceCollection",
                },
              },
              title: "Fill Sections",
            },
          ],
          title: "Controls",
        },
      },
    });

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