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

onMounted(() => {
  store.$reset();
  store.animateIntro(CREDITS.length);
});

onRender((ctx) => {
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);

  ctx.globalAlpha = store.isIntro
    ? store.intro.stage1Opacity
    : store.isOutro
      ? store.outro.stage2Opacity
      : 1;
  ctx.fillStyle = "#ffffff";
  ctx.textBaseline = "top";

  // title
  ctx.font = "10px NDS10";
  fillTextHCentered(
    ctx,
    $t("creditsScreen.title"),
    0,
    CREDITS_HEADER_Y,
    LOGICAL_WIDTH,
  );

  // credits list (top screen entries only)
  ctx.globalAlpha = store.isIntro
    ? store.intro.stage1Opacity
    : store.isOutro
      ? store.outro.stage1Opacity
      : 1;

  for (let i = CREDITS_TOP_SCREEN_COUNT - 1; i >= 0; i--) {
    const id = CREDITS[i]!;
    const offset = store.getItemOffset(i);
    if (offset === -CREDITS_LINE_HEIGHT) continue;

    const baseY = CREDITS_LIST_START_Y + i * CREDITS_ENTRY_HEIGHT;
    const y = baseY + offset;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, y, LOGICAL_WIDTH, CREDITS_LINE_HEIGHT * 3);

    ctx.fillStyle = "#aaaaaa";
    ctx.font = "7px NDS7";
    fillTextHCentered(
      ctx,
      $t(`creditsScreen.${id}.label`),
      0,
      y,
      LOGICAL_WIDTH,
    );

    ctx.fillStyle = "#ffffff";
    ctx.font = "10px NDS10";
    fillTextHCentered(
      ctx,
      $t(`creditsScreen.${id}.author`),
      0,
      y + CREDITS_LINE_HEIGHT,
      LOGICAL_WIDTH,
    );

    ctx.fillStyle = "#888888";
    ctx.font = "7px NDS7";
    fillTextHCentered(
      ctx,
      $t(`creditsScreen.${id}.url`),
      0,
      y + CREDITS_LINE_HEIGHT * 2,
      LOGICAL_WIDTH,
    );
  }
});

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