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

describe("ControlsPanel sectioned compound layout", () => {
  it("renders content-width dividers for sectioned compound controls only when a section has sibling controls", () => {
    const schema = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                gradient: {
                  defaultValue: {
                    angle: 90,
                    gradientType: "linear",
                    stops: [
                      { color: "#111111", position: "0%" },
                      { color: "#FFFFFF", position: "100%" },
                    ],
                  },
                  label: "Gradient",
                  target: "style.gradient",
                  type: "gradient",
                },
                font: {
                  defaultValue: {
                    color: "#FFFFFF",
                    fontId: "inter",
                    fontSize: 16,
                    fontWeight: "400",
                    letterSpacing: "normal",
                    lineHeight: "normal",
                    opacity: 100,
                    textCase: "original",
                  },
                  label: "Font",
                  target: "typography.font",
                  type: "fontPicker",
                },
              },
              title: "Appearance",
            },
          ],
          title: "Generation Controls",
        },
      },
    });

    renderControlsPanelWithSchema(schema);

    const stopsList = screen
      .getByLabelText("Stop 1 position")
      .closest('[data-slot="gradient-stops-list"]');
    const gradientControlItem = stopsList?.closest(
      "[data-control-item-compound-context]",
    ) as HTMLElement | null | undefined;
    const fontControlItem = screen
      .getByText("Weight")
      .closest("[data-control-item-compound-context]") as HTMLElement | null;

    expect(stopsList?.className).not.toContain("border-y");
    expect(gradientControlItem?.dataset.controlItemCompoundDividerPlacement).toBe(
      "bottom",
    );
    expect(gradientControlItem?.className).not.toContain(
      "has-data-[control-section-divider=compound]:py-[18px]",
    );
    expect(gradientControlItem?.className).not.toContain(
      "has-data-[control-section-divider=compound]:pt-[18px]",
    );
    expect(gradientControlItem?.className).toContain(
      "has-data-[control-section-divider=compound]:pb-[18px]",
    );
    expect(gradientControlItem?.className).not.toContain(
      "has-data-[control-section-divider=compound]:before:inset-x-3",
    );
    expect(gradientControlItem?.className).toContain(
      "has-data-[control-section-divider=compound]:after:inset-x-3",
    );
    expect(fontControlItem?.dataset.controlItemCompoundDividerPlacement).toBe("top");
    expect(fontControlItem?.className).toContain(
      "has-data-[control-section-divider=compound]:pt-[18px]",
    );
    expect(fontControlItem?.className).not.toContain(
      "has-data-[control-section-divider=compound]:pb-[18px]",
    );
    expect(fontControlItem?.className).toContain(
      "has-data-[control-section-divider=compound]:before:inset-x-3",
    );
    expect(fontControlItem?.className).not.toContain(
      "has-data-[control-section-divider=compound]:after:inset-x-3",
    );
  });

  it("splits sectioned compound controls out of mixed inline layout groups", () => {
    const schema = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                gradient: {
                  defaultValue: {
                    angle: 90,
                    gradientType: "linear",
                    stops: [
                      { color: "#111111", position: "0%" },
                      { color: "#FFFFFF", position: "100%" },
                    ],
                  },
                  label: "Gradient",
                  target: "style.gradient",
                  type: "gradient",
                },
                mode: {
                  defaultValue: "normal",
                  label: "Mode",
                  options: [
                    { label: "Normal", value: "normal" },
                    { label: "Screen", value: "screen" },
                  ],
                  target: "style.mode",
                  type: "select",
                },
              },
              layoutGroups: [
                {
                  controls: ["gradient", "mode"],
                  layout: "inline",
                },
              ],
              title: "Appearance",
            },
          ],
          title: "Generation Controls",
        },
      },
    });
    const { container } = renderControlsPanelWithSchema(schema);

    const inlineGroup = container.querySelector(
      '[data-control-layout="inline"][data-control-layout-group]',
    );
    const stopsList = screen
      .getByLabelText("Stop 1 position")
      .closest('[data-slot="gradient-stops-list"]');
    const gradientSection = stopsList?.closest("section");
    const modeSection = screen.getByText("Mode").closest("section");

    expect(inlineGroup).toBeNull();
    expect(stopsList?.closest("[data-control-item-compound-context]")).toBeNull();
    expect(gradientSection).not.toBe(modeSection);
  });
});