/**
 * The pictures of the scene view's symbols. They are the asset panel's icons (#176), so a thing
 * looks the same in the panel and in the scene: white, in a dark outline that keeps it readable on
 * any ground, and without a plate behind it.
 */
import type { Graphics } from 'pixi.js';
import { drawSvg, haloSvg, Theme } from '../ui';
import behavior from '../editor/panels/icons/behavior.svg?raw';
import camera from '../editor/panels/icons/camera.svg?raw';
import collider from '../editor/panels/icons/collider.svg?raw';
import container from '../editor/panels/icons/container.svg?raw';
import particles from '../editor/panels/icons/particles.svg?raw';
import rigidbody from '../editor/panels/icons/rigidbody.svg?raw';

export type SymbolIcon = 'behavior' | 'camera' | 'collider' | 'container' | 'particles' | 'rigidbody';

export const SYMBOL_SVG: Record<SymbolIcon, string> = {
  behavior,
  camera,
  collider,
  container,
  particles,
  rigidbody,
};

/** The icons are drawn on a grid of this many units, centred on their origin. */
export const SYMBOL_GRID = 16;
/** How far the outline reaches past the icon, in the icon's own units. */
export const SYMBOL_OUTLINE = 0.75;

const outlines = new Map<string, string>();

/** Adds the icon, outline first, to what `node` already draws – in the icon's own units. */
export function drawSymbolIcon(node: Graphics, icon: SymbolIcon): void {
  const svg = SYMBOL_SVG[icon];
  let outline = outlines.get(svg);
  if (!outline) outlines.set(svg, (outline = haloSvg(svg, SYMBOL_OUTLINE)));
  drawSvg(node, outline, Theme.colors.symbolOutline);
  drawSvg(node, svg, Theme.colors.symbol);
}