<script setup lang="ts">
const store = useProjectsStore();

const { assets } = useAssets();

const drawTextWithShadow = (
  ctx: CanvasRenderingContext2D,
  color: "white" | "black",
  text: string,
  x: number,
  y: number,
) => {
  ctx.fillStyle = color === "white" ? "#505050" : "#a8b8b8";
  ctx.fillText(text, x + 1, y + 0);
  ctx.fillText(text, x + 1, y + 1);
  ctx.fillText(text, x + 0, y + 1);

  ctx.fillStyle = color === "white" ? "#f8f8f8" : "#101820";
  ctx.fillText(text, x, y);
};

const drawTextWithShadow2Lines = (
  ctx: CanvasRenderingContext2D,
  text: string,
  x: number,
  y: number,
  maxWidth: number,
  line1Color: "white" | "black",
  line2Color: "white" | "black",
) => {
  const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);

  if (textWidth <= maxWidth) {
    drawTextWithShadow(ctx, line1Color, text, x, y);
    return;
  }

  const words = text.split(" ");
  let firstLine = "";
  let secondLine = "";

  for (let i = 0; i < words.length; i++) {
    const testLine = firstLine + (firstLine ? " " : "") + words[i];
    const { actualBoundingBoxRight: testWidth } = ctx.measureText(testLine);

    if (testWidth > maxWidth && firstLine) {
      secondLine = words.slice(i).join(" ");
      break;
    }
    firstLine = testLine;
  }

  drawTextWithShadow(ctx, line1Color, firstLine, x, y);
  drawTextWithShadow(ctx, line2Color, secondLine, x, y + 16);
};

useRender((ctx) => {
  ctx.drawImage(assets.projects.topScreen.background, 0, 0);

  ctx.textBaseline = "hanging";
  ctx.font = "16px Pokemon DP Pro";

  const project = store.projects[store.currentProject];
  if (!project) return;

  // image
  const projectImage =
    assets.projects.pokemons[
      project.id as keyof typeof assets.projects.pokemons
    ];
  ctx.drawImage(
    projectImage,
    Math.floor(52 - projectImage.width / 2),
    Math.floor(104 - projectImage.height / 2),
  );

  // text
  drawTextWithShadow(ctx, "white", project.title.toUpperCase(), 23, 25);
  drawTextWithShadow(ctx, "black", project.scope, 12, 41);

  drawTextWithShadow2Lines(
    ctx,
    project.description,
    8,
    161,
    90,
    "white",
    "black",
  );

  const { actualBoundingBoxRight: textWidth } = ctx.measureText(
    project.summary,
  );
  drawTextWithShadow(
    ctx,
    "black",
    project.summary,
    Math.floor(185 - textWidth / 2),
    19,
  );

  let textY = 35;
  for (let i = 0; i < project.tasks.length; i += 1) {
    const lines = project.tasks[i]!.split("\\n");

    ctx.fillStyle = i % 2 === 0 ? "#6870d8" : "#8890f8";
    ctx.fillRect(106, textY - 1, 150, lines.length * 16);

    ctx.fillStyle = i % 2 === 0 ? "#8890f8" : "#b0b8d0";
    ctx.fillRect(105, textY - 1, 1, lines.length * 16);

    for (let j = 0; j < lines.length; j += 1) {
      drawTextWithShadow(ctx, "white", lines[j]!, 118, textY);
      textY += 16;
    }
  }

  drawTextWithShadow2Lines(
    ctx,
    project.technologies.join(", "),
    111,
    161,
    145,
    "black",
    "black",
  );
});

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