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

const handleColor: RgbaColor = [1, 1, 1, 1];
const handleBorderColor: RgbaColor = [0.1, 0.65, 1, 1];

export function renderTransformControls(context: WebGlRendererContext, document: ImageDocument, editor: EditorState) {
  const selectedArtboard = editor.selection.artboardId
    ? document.artboards.find((artboard) => artboard.id === editor.selection.artboardId)
    : undefined;

  if (!selectedArtboard) return;

  const rect = documentRectToScreenRect(context.canvas, selectedArtboard.bounds, editor.viewport);
  for (const handle of transformHandleRects(rect)) {
    clearScreenRect(context, handle.border, handleBorderColor);
    clearScreenRect(context, handle.fill, handleColor);
  }
}

function transformHandleRects(rect: ScreenRect) {
  const size = 8;
  const border = 2;
  const half = size / 2;
  const points = [
    { x: rect.x, y: rect.y },
    { x: rect.x + rect.w / 2, y: rect.y },
    { x: rect.x + rect.w, y: rect.y },
    { x: rect.x + rect.w, y: rect.y + rect.h / 2 },
    { x: rect.x + rect.w, y: rect.y + rect.h },
    { x: rect.x + rect.w / 2, y: rect.y + rect.h },
    { x: rect.x, y: rect.y + rect.h },
    { x: rect.x, y: rect.y + rect.h / 2 },
  ];

  return points.map((point) => ({
    border: { x: Math.round(point.x - half - border), y: Math.round(point.y - half - border), w: size + border * 2, h: size + border * 2 },
    fill: { x: Math.round(point.x - half), y: Math.round(point.y - half), w: size, h: size },
  }));
}