import type { ImageDocument } from "@core/document";
import type { EditorState } from "@editor/state";
import { renderArtboard } from "./artboard";
import { renderSelectionOverlay } from "./selection";
import { renderTransformControls } from "./transform-controls";
import type { WebGlRendererContext } from "./types";

export type RenderFrame = {
  document: ImageDocument;
  editor: EditorState;
};

export type ImageRenderer = {
  render(frame: RenderFrame): void;
  dispose(): void;
};

export type RendererBackend = "webgl";

export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBackend = "webgl"): ImageRenderer {
  if (backend !== "webgl") {
    throw new Error(`Unsupported renderer backend: ${backend}`);
  }

  const context = canvas.getContext("webgl2");
  if (!context) {
    throw new Error("WebGL2 is not available");
  }

  const rendererContext: WebGlRendererContext = { gl: context, canvas };

  return {
    render(frame) {
      const { w, h } = frame.editor.viewport.size;

      if (canvas.width !== w) canvas.width = w;
      if (canvas.height !== h) canvas.height = h;

      context.viewport(0, 0, w, h);
      context.disable(context.SCISSOR_TEST);
      context.clearColor(0.18, 0.18, 0.2, 1);
      context.clear(context.COLOR_BUFFER_BIT);
      context.enable(context.SCISSOR_TEST);

      for (const artboard of frame.document.artboards) {
        renderArtboard(rendererContext, artboard, frame.editor.viewport);
      }

      renderSelectionOverlay(rendererContext, frame.document, frame.editor);
      renderTransformControls(rendererContext, frame.document, frame.editor);

      context.disable(context.SCISSOR_TEST);
    },
    dispose() {},
  };
}