import { cleanup, render } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";

import { defineToolcraft } from "../../schema/define-toolcraft";
import { ToolcraftApp } from "./toolcraft-app";

afterEach(() => {
  cleanup();
  window.localStorage.clear();
});

describe("ToolcraftApp scene export boundary", () => {
  it("applies composition scene bounds to the live infinite product surface", () => {
    const schema = defineToolcraft({
      canvas: {
        enabled: true,
        size: { height: 180, unit: "px", width: 320 },
        sizing: { defaultMode: "infinite", mode: "editable-output" },
      },
      panels: {},
      persistence: { storage: "none" },
    });
    const { container } = render(
      <ToolcraftApp
        canvasContent={<div data-testid="product-scene" />}
        sceneBoundsProvider={() => [
          { height: 240, width: 400, x: -200, y: -120 },
        ]}
        schema={schema}
      />,
    );
    const productScene = container.querySelector<HTMLElement>(
      "[data-toolcraft-product-scene]",
    );

    expect(productScene?.style.height).toBe("240px");
    expect(productScene?.style.left).toBe("-200px");
    expect(productScene?.style.top).toBe("-120px");
    expect(productScene?.style.width).toBe("400px");
  });

  it("fails before mount when a typed product export has no shared renderer", () => {
    const schema = defineToolcraft({
      canvas: {
        enabled: true,
        size: { height: 180, unit: "px", width: 320 },
      },
      panels: {
        controls: {
          sections: [
            {
              actionGroup: "secondary",
              controls: {
                footer: {
                  actions: [
                    {
                      label: "Export image",
                      role: "export-image",
                      value: "export",
                      variant: "default",
                    },
                  ],
                  target: "panel.actions",
                  type: "panelActions",
                },
              },
            },
          ],
          title: "Controls",
        },
      },
    });
    expect(() =>
      render(
        <ToolcraftApp
          canvasContent={<div data-testid="product-scene" />}
          schema={schema}
        />,
      ),
    ).toThrow("Product-owned image/video export actions require exportRenderer");
  });

  it("requires typed SVG actions and SVG renderers to correspond", () => {
    const schema = defineToolcraft({
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                footer: {
                  actions: [
                    {
                      label: "Export SVG",
                      role: "export-svg",
                      value: "export.svg",
                    },
                  ],
                  target: "actions.output",
                  type: "panelActions",
                },
              },
            },
          ],
          title: "Controls",
        },
      },
      persistence: { storage: "none" },
    });

    expect(() => render(<ToolcraftApp schema={schema} />)).toThrow(
      "A typed SVG export action requires svgExportRenderer",
    );
    expect(() =>
      render(
        <ToolcraftApp
          schema={defineToolcraft({
            canvas: { enabled: true },
            panels: {},
            persistence: { storage: "none" },
          })}
          svgExportRenderer={{ baseFileName: "vector", renderFrame: () => {} }}
        />,
      ),
    ).toThrow("svgExportRenderer requires a typed SVG export action");
  });
});