<script setup lang="ts">
import SCOPE_BADGE_IMAGE from "~/assets/images/projects/top-screen/scope-badge.png";

const store = useProjectsStore();

const [scopeBadgeImage, ...projectPreviews] = useImages(
  SCOPE_BADGE_IMAGE,
  ...store.projects.map((x) => x.preview),
);

const getBounds = () => ({
  startIndex: Math.max(store.currentProject - 1, 0),
  endIndex: Math.min(store.currentProject + 1 + 1, store.projects.length),
});

const TECH_BADGES: Record<string, { label: string; color: string }> = {
  nuxt: { label: "Nuxt", color: "#00DC82" },
  typescript: { label: "TypeScript", color: "#3178C6" },
  rust: { label: "Rust", color: "#CE422B" },
  html: { label: "HTML", color: "#E34C26" },
  go: { label: "Go", color: "#00ADD8" },
  node: { label: "Node", color: "#339933" },
  stenciljs: { label: "Stencil", color: "#5851FF" },
  jira: { label: "Jira", color: "#0052CC" },
  confluence: { label: "Confluence", color: "#2DA2E5" },
  vba: { label: "VBA", color: "#5D2B90" },
};

const BADGE_PADDING = 2;
const BADGE_SPACING = 2;
const BADGE_MARGIN = 1;
const BADGE_HEIGHT = 11;

const drawTechBadges = (
  ctx: CanvasRenderingContext2D,
  technologies: string[],
  x: number,
  y: number,
): void => {
  ctx.font = "7px NDS7";

  let currentX = x;
  for (let i = technologies.length - 1; i >= 0; i--) {
    const badge = TECH_BADGES[technologies[i]?.toLowerCase() ?? ""];
    if (!badge) throw new Error(`Unknown technology: ${technologies[i]}`);

    const { actualBoundingBoxRight: textWidth } = ctx.measureText(badge.label);
    const badgeWidth = textWidth + BADGE_PADDING * 2;

    currentX -= badgeWidth;

    ctx.fillStyle = badge.color;
    ctx.fillRect(currentX, y, badgeWidth, BADGE_HEIGHT);

    ctx.fillStyle = "#FFFFFF";
    ctx.textBaseline = "top";
    ctx.fillText(badge.label, currentX + BADGE_PADDING, y + 2);

    currentX -= BADGE_SPACING;
  }
};

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

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

  const { startIndex, endIndex } = getBounds();

  for (let i = startIndex; i < endIndex; i += 1) {
    const previewImage = projectPreviews[i]!;

    const offsetFromCenter = i - store.currentProject;
    const baseX = (256 - previewImage.width) / 2;
    const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
    const y = (192 - previewImage.height) / 2 + 10;

    // game
    ctx.save();
    ctx.translate(x, y);

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

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

    ctx.drawImage(previewImage, 0, 0);
    ctx.restore();

    // technologies
    const project = store.projects[i]!;
    if (project.technologies && project.technologies.length > 0) {
      const badgeY = previewImage.height - BADGE_HEIGHT - BADGE_MARGIN;
      const badgeX = previewImage.width - BADGE_MARGIN;
      drawTechBadges(ctx, project.technologies, badgeX, badgeY);
    }

    // scope
    ctx.translate(previewImage.width - scopeBadgeImage!.width + 3, -2);
    ctx.drawImage(scopeBadgeImage!, 0, 0);

    ctx.font = "7px NDS7";
    ctx.fillStyle = "#000000";
    ctx.textBaseline = "top";
    fillTextCentered(ctx, project.scope.toUpperCase(), 0, -5, 40);

    ctx.restore();
  }
});

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