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

// text color:
const store = useContactStore();
const { assets } = useAssets();

onRender((ctx) => {
  ctx.globalAlpha = store.outro.stage2Opacity;
  ctx.font = "10px NDS10";

  // notifications
  for (let i = store.notifications.length - 1; i >= 0; i--) {
    const index = store.notifications.length - 1 - i;
    const y = 169 - 24 * index + store.notificationsYOffset;
    if (y < -24) break;

    assets.images.contact.bottomScreen.notification.draw(ctx, 21, y);

    const content = store.notifications[i]!;
    ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
    ctx.fillText(store.notifications[i]!, 27, y + 15);
  }

  // title
  ctx.globalAlpha = store.isIntro
    ? store.intro.stage1Opacity
    : store.outro.stage2Opacity;
  assets.images.contact.topScreen.title.draw(
    ctx,
    21,
    store.isIntro
      ? store.intro.titleY
      : 169 - 24 * store.notifications.length + store.notificationsYOffset,
  );

  // notifications count (left bar)
  const MAX = 36;
  const MAX_VISIBLE = 8;

  let visibleNotifications = Math.min(store.notifications.length, MAX_VISIBLE);
  const extraActive =
    store.notificationsYOffset > 0 && store.notifications.length > MAX_VISIBLE;

  if (extraActive) {
    visibleNotifications += 1;
  }

  ctx.fillStyle = "#415969";
  for (let i = 0; i < visibleNotifications; i++) {
    ctx.fillRect(3, 161 - i * 4, 12, 2);
  }

  ctx.fillStyle = "#b2c3db";
  const startY = 161 - visibleNotifications * 4;
  const top = MAX - MAX_VISIBLE - (extraActive ? 1 : 0);
  for (
    let i = 0;
    i < store.notifications.length - visibleNotifications && i < top;
    i++
  ) {
    if (i === top - 1) {
      ctx.fillRect(7, startY - i * 4, 4, 2);
    } else if (i === top - 2) {
      ctx.fillRect(5, startY - i * 4, 8, 2);
    } else {
      ctx.fillRect(3, startY - i * 4, 12, 2);
    }
  }
});

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