<script setup lang="ts">
import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.png";
import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.png";
import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.png";
import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.png";

const store = useHomeStore();

const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
  useImages(
    STATUS_BAR_IMAGE,
    GBA_DISPLAY_IMAGE,
    STARTUP_MODE_IMAGE,
    BATTERY_IMAGE,
  );

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

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

  ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
  ctx.drawImage(statusBarImage!, 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(gbaDisplayImage!, 210, 2);
  ctx.drawImage(startupModeImage!, 226, 2);
  ctx.drawImage(batteryImage!, 242, 4);
});

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