import { describe, expect, it } from "vitest";

import { defineToolcraft } from "./define-toolcraft";
import type { ToolcraftAppSchema } from "./types";

function createBackgroundSchema(): ToolcraftAppSchema {
  return {
    canvas: {
      enabled: true,
      renderScale: true,
      size: { height: 1350, unit: "px", width: 1080 },
      sizing: { mode: "editable-output" },
    },
    panels: {
      controls: {
        sections: [
          {
            controls: {
              includeBackground: {
                defaultValue: true,
                description:
                  "Controls preview and PNG background visibility while video keeps the background.",
                label: "Include",
                target: "export.includeBackground",
                type: "switch",
              },
              background: {
                defaultValue: "#0F0F0F",
                label: false,
                target: "appearance.background",
                type: "color",
              },
            },
            id: "background",
            layoutGroups: [
              {
                columns: 2,
                controls: ["includeBackground", "background"],
                layout: "inline",
              },
            ],
            title: "Background",
          },
          {
            controls: {
              imageFormat: {
                defaultValue: "png",
                label: "Format",
                target: "export.image.format",
                type: "select",
              },
            },
            id: "image-export",
            title: "Image Export",
          },
        ],
        title: "Controls",
      },
      timeline: { mode: "playback" },
    },
  };
}

describe("defineToolcraft runtime setup background controls", () => {
  it("moves the managed background pair into Setup and places Timeline last", () => {
    const app = defineToolcraft(createBackgroundSchema());
    const sections = app.panels.controls?.sections ?? [];
    const setupSection = sections[0];

    expect(sections.map((section) => section.title)).toEqual([
      "Setup",
      "Image Export",
    ]);
    expect(Object.keys(setupSection?.controls ?? {})).toEqual([
      "settingsTransfer",
      "includeBackground",
      "infinityCanvas",
      "background",
      "canvasAspectRatio",
      "canvasWidth",
      "canvasHeight",
      "canvasRenderScale",
      "timelineExtended",
    ]);
    expect(setupSection?.controls.includeBackground).toMatchObject({
      defaultValue: true,
      label: "Background",
      target: "export.includeBackground",
      type: "switch",
    });
    expect(setupSection?.controls.background).toMatchObject({
      defaultValue: "#0F0F0F",
      label: "Background color",
      target: "appearance.background",
      type: "color",
    });
    expect(setupSection?.controls.infinityCanvas).toMatchObject({
      disabledWhen: {
        equals: false,
        target: "export.includeBackground",
      },
      target: "canvas.infinity",
      type: "switch",
    });
    expect(setupSection?.layoutGroups).toEqual([
      {
        columns: 2,
        controls: ["includeBackground", "infinityCanvas"],
        layout: "inline",
      },
      {
        columns: 2,
        controls: ["canvasWidth", "canvasHeight"],
        layout: "inline",
      },
    ]);
  });

  it("keeps the normalized background pair when a resolved schema is defined again", () => {
    const first = defineToolcraft(createBackgroundSchema());
    const second = defineToolcraft(first as unknown as ToolcraftAppSchema);
    const setupSection = second.panels.controls?.sections[0];

    expect(second.panels.controls?.sections.map((section) => section.title)).toEqual([
      "Setup",
      "Image Export",
    ]);
    expect(Object.values(setupSection?.controls ?? {}).map((control) => control.target)).toEqual(
      [
        "runtime.settingsTransfer",
        "export.includeBackground",
        "canvas.infinity",
        "appearance.background",
        "canvas.aspectRatio",
        "canvas.size.width",
        "canvas.size.height",
        "canvas.renderScale",
        "panels.timeline.extended",
      ],
    );
  });
});