<script setup lang="ts">
const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
const startupModeImage = useTemplateRef("startupModeImage");
const batteryImage = useTemplateRef("batteryImage");

useRender((ctx) => {
  if (!gbaDisplayImage.value || !startupModeImage.value || !batteryImage.value)
    return;

  const TEXT_Y = 11;

  ctx.fillStyle = "#ffffff";
  ctx.font = "7px NDS7";

  // username
  ctx.fillText("pihkaal", 3, TEXT_Y);

  // time + date
  const fillNumberCell = (value: number, cellX: number, offset: number) => {
    const text = value.toFixed().padStart(2, "0");
    const { actualBoundingBoxRight: width } = ctx.measureText(text);

    const x = cellX * 16;
    ctx.fillText(text, Math.floor(x + offset + (16 - width) / 2), TEXT_Y);
  };

  const now = new Date();

  fillNumberCell(now.getHours(), 9, 1);
  if (Math.floor(now.getMilliseconds() / 500) % 2 == 0) {
    ctx.fillText(":", 159, TEXT_Y);
  }
  fillNumberCell(now.getMinutes(), 10, -1);

  fillNumberCell(now.getDate(), 11, 1);
  ctx.fillText("/", 190, TEXT_Y);
  fillNumberCell(now.getMonth() + 1, 12, -1);

  // icons
  ctx.drawImage(gbaDisplayImage.value, 210, 2);
  ctx.drawImage(startupModeImage.value, 226, 2);
  ctx.drawImage(batteryImage.value, 242, 4);
});
</script>

<template>
  <img ref="gbaDisplayImage" src="/assets/status-bar_gba-display.png" hidden />
  <img
    ref="startupModeImage"
    src="/assets/status-bar_startup-mode.png"
    hidden
  />
  <img ref="batteryImage" src="/assets/status-bar_battery.png" hidden />
</template>
