import type { ImageDocument } from "@core/document";
import type { Layer } from "@core/layer";
import type { ViewportState } from "@editor/state";
import { resolveTransformTargetBounds } from "@editor/transform-targets";
import { clearScreenRect } from "./clear-rect";
import { documentRectToScreenRect } from "./screen-rect";
import type { RgbaColor, WebGlRendererContext } from "./types";

const imageLayerColor: RgbaColor = [0.38, 0.42, 0.5, 1];
const imageLayerInsetColor: RgbaColor = [0.48, 0.54, 0.64, 1];

export function renderLayers(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState) {
  for (const artboard of document.artboards) {
    for (const layer of artboard.layers) renderLayer(context, document, viewport, layer);
  }
}

function renderLayer(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState, layer: Layer) {
  if (!layer.visible) return;

  if (layer.type === "group") {
    for (const child of layer.children) renderLayer(context, document, viewport, child);
    return;
  }

  const bounds = resolveTransformTargetBounds(document, { type: "layer", id: layer.id });
  if (!bounds) return;

  const rect = documentRectToScreenRect(context.canvas, bounds, viewport);
  clearScreenRect(context, rect, imageLayerColor);
  clearScreenRect(context, { x: rect.x + 4, y: rect.y + 4, w: Math.max(0, rect.w - 8), h: Math.max(0, rect.h - 8) }, imageLayerInsetColor);
}