import { SHOW_SELECTOR_TEXT } from '../../utils/default';

interface ISelectorProps {
  text: string
  x: number
  y: number
  width: number
  height: number
  scale: number
}

export function RenderSelector(
  ctx: CanvasRenderingContext2D,
  frameCount: number,
  {
    text,
    x,
    y,
    width,
    height,
    scale
  }: ISelectorProps
): void {
  const xText = x + width / 2;
  const yText = y + height / 2;

  ctx.strokeStyle = '#3B82F6';
  ctx.lineWidth = 4 / scale;
  ctx.globalAlpha = (Math.sin(frameCount * 0.0450) ** 2);
  ctx.strokeRect(x, y, width, height);
  ctx.globalAlpha = 1;
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'black';

  if (SHOW_SELECTOR_TEXT) {
    ctx.font = `${16 / scale}px Verdana`;
    ctx.textAlign = 'center';
    ctx.fillText(text, xText, yText);
    ctx.textAlign = 'left';
  }
}