<script setup lang="ts">
const { onRender } = useScreen();

// NOTE: calendar background is handled by TopScreenBackground
const store = useHomeStore();
const { assets } = useAssets();

onRender((ctx) => {
  ctx.fillStyle = "black";
  ctx.font = "7px NDS7";

  const CALENDAR_COLS = 7;
  const CALENDAR_ROWS = 5;
  const CALENDAR_LEFT = 128;
  const CALENDAR_TOP = 64;

  ctx.fillStyle = "#343434";

  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  ctx.globalAlpha = store.isIntro
    ? store.intro.stage1Opacity
    : store.isOutro && store.outro.animateTop
      ? store.outro.stage1Opacity
      : 1;
  assets.images.home.topScreen.calendar.calendar.draw(
    ctx,
    CALENDAR_LEFT - 3,
    CALENDAR_TOP - 33,
  );

  const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
  if (extraRow) {
    assets.images.home.topScreen.calendar.lastRow.draw(
      ctx,
      CALENDAR_LEFT - 3,
      CALENDAR_TOP + 79,
    );
  }

  ctx.globalAlpha = store.isIntro
    ? store.intro.stage1Opacity
    : store.isOutro && store.outro.animateTop
      ? store.outro.stage2Opacity
      : 1;
  for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) {
    for (let row = 0; row < CALENDAR_COLS; row += 1) {
      const cellIndex = col * CALENDAR_COLS + row;
      const day = cellIndex - firstDay + 1;

      if (day > 0 && day <= daysInMonth) {
        const dayText = day.toString();
        const { actualBoundingBoxRight: width } = ctx.measureText(dayText);

        const cellLeft = CALENDAR_LEFT + row * 16;
        const cellTop = CALENDAR_TOP + col * 16;

        if (now.getDate() === day) {
          assets.images.home.topScreen.calendar.daySelectorsSheet.draw(
            ctx,
            cellLeft + 1,
            cellTop + 1,
            { colored: true },
          );
        }

        ctx.fillText(
          dayText,
          cellLeft + Math.floor((15 - width) / 2),
          cellTop + 11,
        );
      }
    }
  }

  ctx.fillStyle = "black";
  ctx.font = "10px NDS10";
  ctx.letterSpacing = "2px";

  const timeText = `${(month + 1).toString().padStart(2, "0")}/${year}`;
  const { actualBoundingBoxRight: width } = ctx.measureText(timeText);

  ctx.fillText(
    timeText,
    CALENDAR_LEFT + Math.floor((111 - width) / 2),
    CALENDAR_TOP - 20,
  );
});

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