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

const PREV_BUTTON: Point = [36, 100];
const QUIT_BUTTON: Point = [88, 156];
const LINK_BUTTON: Point = [168, 156];
const NEXT_BUTTON: Point = [220, 100];

const CLICK_RADIUS = 22;

const circleContains = (
  [cx, cy]: Point,
  [x, y]: Point,
  radius: number,
): boolean => Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 2)) < radius;

useScreenClick((x, y) => {
  const project = store.projects[store.currentProject];
  if (circleContains(PREV_BUTTON, [x, y], CLICK_RADIUS)) {
    store.scrollProjects("left");
  } else if (circleContains(NEXT_BUTTON, [x, y], CLICK_RADIUS)) {
    store.scrollProjects("right");
  } else if (circleContains(QUIT_BUTTON, [x, y], CLICK_RADIUS)) {
    throw new Error("quit");
  } else if (
    circleContains(LINK_BUTTON, [x, y], CLICK_RADIUS) &&
    project?.link
  ) {
    // TODO: show confirmation popup before opening the link, like "you are about to navigate to [...]"
    store.visitProject();
  }
});

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

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

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