<script setup lang="ts">
const store = useHomeStore();

const { assets } = useAssets();

useRender((ctx) => {
  const TEXT_Y = 11;

  ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);

  ctx.globalAlpha =
    store.isOutro && store.outro.animateTop ? store.outro.stage2Opacity : 1;
  ctx.drawImage(assets.home.topScreen.statusBar.statusBar, 0, 0);

  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(assets.home.topScreen.statusBar.gbaDisplay, 210, 2);
  ctx.drawImage(assets.home.topScreen.statusBar.startupMode, 226, 2);
  ctx.drawImage(assets.home.topScreen.statusBar.battery, 242, 4);
});

defineOptions({
  render: () => null,
});
</script>
