export const PANEL_COLORS = [
  0xff5050, 0x50ff50, 0x50a0ff, 0xffc850, 0xc850ff,
];

/**
 * Paint a panel frame. `rgb` is logical [R,G,B,R,G,B,…] from the Python simulator
 * (same byte order as UDP panel frames). Canvas ImageData uses RGBA.
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {HTMLCanvasElement} canvas
 * @param {number[] | Uint8Array} rgb
 * @param {number} width
 * @param {number} height
 */
export function paintRgb(ctx, canvas, rgb, width, height) {
  if (canvas.width !== width || canvas.height !== height) {
    canvas.width = width;
    canvas.height = height;
  }
  const image = ctx.createImageData(width, height);
  const data = image.data;
  for (let i = 0, p = 0; i < rgb.length; i += 3, p += 4) {
    data[p] = rgb[i];
    data[p + 1] = rgb[i + 1];
    data[p + 2] = rgb[i + 2];
    data[p + 3] = 255;
  }
  ctx.putImageData(image, 0, 0);
}

/**
 * @param {CanvasRenderingContext2D} ctx
 * @param {HTMLCanvasElement} canvas
 * @param {number} panelIndex
 * @param {number} width
 * @param {number} height
 */
export function paintIdentify(ctx, canvas, panelIndex, width, height) {
  if (canvas.width !== width || canvas.height !== height) {
    canvas.width = width;
    canvas.height = height;
  }
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, width, height);
  const hex = PANEL_COLORS[panelIndex % PANEL_COLORS.length].toString(16).padStart(6, "0");
  ctx.fillStyle = `#${hex}`;
  ctx.font = `bold ${Math.floor(height * 0.75)}px monospace`;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(String(panelIndex), width / 2, height / 2);
}