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

const selectionOuterColor: RgbaColor = [0, 0, 0, 1];
const selectionInnerColor: RgbaColor = [1, 1, 1, 1];

export function renderSelectionOverlay(context: WebGlRendererContext, document: ImageDocument, editor: EditorState) {
  const target = selectedTransformTarget(document, editor.selection);
  const bounds = target ? resolveTransformTargetBounds(document, target) : undefined;
  if (!bounds) return;

  const rect = documentRectToScreenRect(context.canvas, bounds, editor.viewport);
  renderScreenRectStroke(context, rect, 6, selectionOuterColor);
  renderScreenRectStroke(context, rect, 2, selectionInnerColor);
}

function renderScreenRectStroke(context: WebGlRendererContext, rect: ScreenRect, width: number, color: RgbaColor) {
  clearScreenRect(context, { x: rect.x - width, y: rect.y - width, w: rect.w + width * 2, h: width }, color);
  clearScreenRect(context, { x: rect.x - width, y: rect.y + rect.h, w: rect.w + width * 2, h: width }, color);
  clearScreenRect(context, { x: rect.x - width, y: rect.y, w: width, h: rect.h }, color);
  clearScreenRect(context, { x: rect.x + rect.w, y: rect.y, w: width, h: rect.h }, color);
}