<script setup lang="ts">
import Background from "./Background.vue";
import StatusBar from "./StatusBar.vue";

const store = useProjectsStore();

useRender((ctx) => {
  const project = store.projects[store.currentProject];
  if (!project) return;

  ctx.font = "10px NDS10";
  ctx.fillStyle = "#000000";

  const preview = store.projects[store.currentProject]?.preview;
  if (!preview) return;
  try {
    const x = (256 - preview.width) / 2;
    const y = (192 - preview.height) / 2 + 10;
    ctx.translate(x, y);

    ctx.fillStyle = "#a6a6a6";
    ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
    ctx.fillStyle = "#000000";
    ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);

    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    ctx.drawImage(preview, 0, 0);
  } catch {
    // NOTE: this is needed because not all projects have previews yet
  }
  return;

  /*
   * NOTE: following code is markdown renderer

  let penY = 20;
  const SPACE_Y = 6;

  for (const node of project.body) {
    switch (node.type) {
      case "h1": {
        ctx.font = "10px NDS10";
        penY += fillTextCentered(ctx, node.text, 0, penY, 256);
        break;
      }

      case "p": {
        ctx.font = "10px NDS10";
        penY += fillTextWordWrapped(ctx, node.text, 10, penY, 236) - 6;
        break;
      }

      case "img": {
        const x = 10 + 236 / 2 - node.image.width / 2;

        if (1) {
          ctx.fillStyle = "#000000";
          ctx.fillRect(
            x - 2,
            penY - 2,
            node.image.width + 4,
            node.image.height + 4,
          );
          ctx.fillStyle = "#ffffff";
          ctx.fillRect(
            x - 1,
            penY - 1,
            node.image.width + 2,
            node.image.height + 2,
          );
        } else {
          ctx.fillStyle = "#7d7d7d";
          ctx.fillRect(
            x - 1,
            penY - 1,
            node.image.width + 2,
            node.image.height + 2,
          );
        }

        ctx.drawImage(node.image, x, penY);
        penY += node.image.height;
        break;
      }

      default:
        throw new Error("not implemented");
    }
    penY += SPACE_Y;
    }
    */
});
</script>

<template>
  <Background />

  <StatusBar />
</template>
