import {
  cleanup,
  fireEvent,
  render,
  screen,
  waitFor,
} from "@testing-library/react";
import * as React from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { encodeToolcraftModelDocument } from "../../model-import/canonical/model-document-codec";
import { createValidModelDocument } from "../../model-import/canonical/model-document-test-support";
import { createHydrationModelAsset } from "../../model-import/model-persistence-hydration-test-support";
import { defineToolcraft } from "../../schema/define-toolcraft";
import { ToolcraftRoot } from "../app-shell/toolcraft-root";
import { useToolcraftDispatch } from "../app-shell/use-toolcraft";
import { useToolcraftCanvasFrame } from "../canvas/use-toolcraft-canvas-frame";
import { createModelCanvasLayerTestBinding } from "./model-canvas-layer.test-support";
import { ToolcraftModelCanvasLayers } from "./model-canvas-layer";
import { ToolcraftModelRenderProvider } from "./model-render-provider";
afterEach(() => {
  cleanup();
});
describe("Toolcraft model canvas continuity", () => {
  it("keeps one model render surface and lifecycle across canvas modes", async () => {
    const binding = createModelCanvasLayerTestBinding();
    const bytes = encodeToolcraftModelDocument(createValidModelDocument());
    const schema = defineToolcraft({
      base: {
        identity: {
          id: "runtime-test",
          title: "Toolcraft fixture",
        },
        canvas: { enabled: true },
        panels: {},
      },
      modules: [],
    });
    const view = render(
      <ToolcraftRoot
        initialState={{
          canvas: {
            mode: "finite",
            offset: { x: 0, y: 0 },
            size: { height: 768, unit: "px", width: 1024 },
            zoom: 100,
          },
          layers: [
            {
              displayName: "Model",
              id: "layer-1",
              kind: "layer",
              name: "model",
              visible: true,
            },
          ],
          mediaAssets: [
            createHydrationModelAsset("document:a", {
              lifecycle: "clean",
              position: { x: 80, y: -40 },
              size: { height: 200, unit: "px", width: 300 },
              sourceTarget: "source.model",
            }),
          ],
        }}
        schema={schema}
      >
        <ToolcraftModelRenderProvider
          bindings={{ "source.model": binding }}
          resolveResource={async () => bytes}
          standardBinding={createModelCanvasLayerTestBinding()}
        >
          <ToolcraftModelCanvasLayers dispatch={vi.fn()} />
          <ModelInfinityToggle />
        </ToolcraftModelRenderProvider>
      </ToolcraftRoot>,
    );
    const layer = await waitFor(() => {
      const element = view.container.querySelector<HTMLElement>(
        '[data-canvas-model-layer="layer-1"]',
      );
      expect(element).not.toBeNull();
      return element as HTMLElement;
    });
    expect(layer.style.left).toBe("-70px");
    expect(layer.style.top).toBe("-140px");
    expect(layer.style.width).toBe("300px");
    expect(layer.style.height).toBe("200px");
    expect(layer.dataset.selected).toBe("true");
    const finiteStyle = layer.style.cssText;
    expect(screen.getByTestId("model-canvas-mode").textContent).toBe("finite");
    await waitFor(() =>
      expect(binding.create).toHaveBeenCalledWith(
        expect.objectContaining({
          displayFit: expect.objectContaining({
            viewport: { height: 200, width: 300 },
          }),
        }),
        expect.anything(),
      ),
    );
    fireEvent.click(screen.getByRole("button", { name: "Enable Infinity" }));
    const infiniteLayer = view.container.querySelector<HTMLElement>(
      '[data-canvas-model-layer="layer-1"]',
    );
    expect(infiniteLayer).toBe(layer);
    expect(infiniteLayer?.style.cssText).toBe(finiteStyle);
    expect(binding.create).toHaveBeenCalledTimes(1);
    expect(screen.getByTestId("model-canvas-mode").textContent).toBe(
      "infinite",
    );
  });
});
function ModelInfinityToggle(): React.JSX.Element {
  const dispatch = useToolcraftDispatch();
  const frame = useToolcraftCanvasFrame();
  return (
    <>
      <output data-testid="model-canvas-mode">{frame.kind}</output>
      <button
        onClick={() =>
          dispatch({
            target: "canvas.infinity",
            type: "controls.setValue",
            value: true,
          })
        }
        type="button"
      >
        Enable Infinity
      </button>
    </>
  );
}