<script setup lang="ts">
// TODO: handle mouse wheel and clicking on other projects

import gsap from "gsap";
import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.png";
import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.png";
import { useKeyDown } from "~/composables/useKeyDown";

const store = useProjectsStore();

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

const offsetX = ref(0);

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

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

    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) => {
  // scrolling
  let from = 0;
  if (
    key === "ArrowRight" &&
    store.currentProject < store.projects.length - 1
  ) {
    store.currentProject += 1;
    from = 69;
  } else if (key === "ArrowLeft" && store.currentProject > 0) {
    store.currentProject -= 1;
    from = -69;
  }

  if (from != 0) {
    gsap.fromTo(
      offsetX,
      {
        value: from,
      },
      {
        value: 0,
        duration: 0.075,
        ease: "none",
      },
    );
  }

  if (key === "Enter" || key === " ") {
    store.visitProject();
  }
});

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