import type { ImageDocument } from "@core/document";
import type { Layer } from "@core/layer";
import type { EditorState } from "@editor/state";
import { resolveTransformTargetBounds } from "@editor/transform-targets";
import type { ImageTextureRenderer } from "./image-textures";
import { documentRectToScreenRect } from "./screen-rect";
import type { WebGlRendererContext } from "./types";

const maskOverlayColor = [0.25, 0.65, 1, 0.35] as const;

export function renderMaskEditOverlay(
  context: WebGlRendererContext,
  document: ImageDocument,
  editor: EditorState,
  imageTextureRenderer: ImageTextureRenderer,
) {
  const layerId = editor.maskEditLayerId;
  if (!layerId) return;

  const layer = findLayer(document.artboards.flatMap((artboard) => artboard.layers), layerId);
  if (!layer || layer.type === "group") return;

  const bounds = resolveTransformTargetBounds(document, { type: "layer", id: layer.id });
  const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
  if (!bounds || !asset) return;

  const rect = documentRectToScreenRect(context.canvas, bounds, editor.viewport);
  imageTextureRenderer.renderTinted(asset, rect, maskOverlayColor);
}

function findLayer(layers: readonly Layer[], layerId: string): Layer | undefined {
  for (const layer of layers) {
    if (layer.id === layerId) return layer;
    if (layer.type === "group") {
      const child = findLayer(layer.children, layerId);
      if (child) return child;
    }
  }
  return undefined;
}