<script setup lang="ts">
import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.webp";
import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.webp";

const store = useProjectsStore();

const [selectorImage, projectSquareImage, ...projectThumbnails] = useImages(
  SELECTOR_IMAGE,
  PROJECT_SQUARE_IMAGE,
  ...store.projects.map((x) => x.thumbnail),
);

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

useRender((ctx) => {
  const { startIndex, endIndex } = getBounds();

  for (let i = startIndex; i < endIndex; i += 1) {
    const offsetFromCenter = i - store.currentProject;
    const x = 101 + 69 * offsetFromCenter + store.offsetX;

    ctx.drawImage(projectSquareImage!, x, 81);
    ctx.drawImage(projectThumbnails[i]!, x + 7, 88);
  }

  ctx.drawImage(selectorImage!, 96, 76);

  ctx.font = "10px NDS10";

  const lines = store.projects[store.currentProject]!.description.split("\\n");
  const textY = lines.length === 1 ? 35 : 28;
  for (let i = 0; i < lines.length; i += 1) {
    const { actualBoundingBoxRight: width } = ctx.measureText(lines[i]!);
    ctx.fillText(lines[i]!, Math.floor(128 - width / 2), textY + 15 * i);
  }
});

useKeyDown((key) => {
  switch (key) {
    case "ArrowLeft":
      store.scrollProjects("left");
      break;
    case "ArrowRight":
      store.scrollProjects("right");
      break;
    case "Enter":
    case " ":
      store.visitProject();
      break;
  }
});

useScreenMouseWheel((dy) => {
  if (dy > 0) {
    store.scrollProjects("right");
  } else if (dy < 0) {
    store.scrollProjects("left");
  }
});

useScreenClick((x, y) => {
  const { startIndex, endIndex } = getBounds();

  for (let i = startIndex; i < endIndex; i += 1) {
    const offsetFromCenter = i - store.currentProject;
    const rectX = 101 + 69 * offsetFromCenter + store.offsetX;

    if (rectContains([rectX, 81, 54, 54], [x, y])) {
      if (i === store.currentProject) {
        store.visitProject();
      } else {
        store.scrollToProject(i);
        break;
      }
    }
  }
});

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