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

describe("ControlsPanel select layout", () => {
  it("renders standalone select controls stacked full-width instead of compact side-label rows", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                shape: {
                  defaultValue: "pill",
                  label: "Shape",
                  options: [
                    { label: "Pill", value: "pill" },
                    { label: "Circle", value: "circle" },
                  ],
                  target: "glass.shape",
                  type: "select",
                },
              },
              title: "Glass",
            },
          ],
          title: "Controls",
        },
      },
    });

    renderControlsPanelWithSchema(schema);
    const trigger = screen.getByRole("combobox");
    const field = trigger.closest<HTMLElement>('[data-slot="field"]');

    expect(screen.getByText("Shape")).toBeTruthy();
    expect(trigger.textContent).toContain("Pill");
    expect(field?.dataset.orientation).toBe("vertical");
    expect(field?.className).toContain("gap-2");
    expect(trigger.closest("div")?.className).toContain("w-full");
  });

  it("renders compact select pairs inline with stacked full-width fields", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                videoFormat: {
                  defaultValue: "mp4",
                  label: "Format",
                  options: [
                    { label: "MP4", value: "mp4" },
                    { label: "WebM", value: "webm" },
                  ],
                  target: "export.video.format",
                  type: "select",
                },
                videoResolution: {
                  defaultValue: "current",
                  label: "Resolution",
                  options: [
                    { label: "Current", value: "current" },
                    { label: "4K", value: "4k" },
                  ],
                  target: "export.video.resolution",
                  type: "select",
                },
              },
              layoutGroups: [
                {
                  columns: 2,
                  controls: ["videoFormat", "videoResolution"],
                  layout: "inline",
                },
              ],
              title: "Video Export",
            },
          ],
          title: "Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema);
    const inlineGroup = container.querySelector(
      '[data-control-layout="inline"][data-control-layout-columns="2"]',
    );
    const triggers = screen.getAllByRole("combobox");
    const fields = triggers.map((trigger) =>
      trigger.closest<HTMLElement>('[data-slot="field"]'),
    );

    expect(inlineGroup).toBeTruthy();
    expect(inlineGroup?.className).toContain("gap-x-2.5");
    expect(screen.getByText("Format")).toBeTruthy();
    expect(screen.getByText("Resolution")).toBeTruthy();
    expect(triggers).toHaveLength(2);
    expect(triggers[0]?.textContent).toContain("MP4");
    expect(fields.every((field) => field?.dataset.orientation === "vertical")).toBe(
      true,
    );
    expect(fields.every((field) => (field ? inlineGroup?.contains(field) : false))).toBe(
      true,
    );
  });

  it("keeps explanatory label text in the native title instead of the visible label", () => {
    const schema = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                gridDensity: {
                  defaultValue: "6",
                  label: "Grid Density (every Nth)",
                  options: [
                    { label: "Every 4th", value: "4" },
                    { label: "Every 6th", value: "6" },
                  ],
                  target: "grid.density",
                  type: "select",
                },
              },
              title: "Grid",
            },
          ],
          title: "Generation Controls",
        },
      },
    });

    const { container } = renderControlsPanelWithSchema(schema);
    const label = container.querySelector('[data-slot="template-field-label-text"]');

    expect(label?.textContent).toBe("Grid Density");
    expect(label?.getAttribute("title")).toBe("Grid Density (every Nth)");
    expect(screen.queryByText("Grid Density (every Nth)")).toBeNull();
  });
});