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

const projectPreviews = ref<HTMLImageElement[]>([]);

onMounted(() => {
  console.log(store.projects);
  projectPreviews.value = useImages(...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),
});

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 preview = projectPreviews.value[i];
    if (!preview) continue;

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

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

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

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

    ctx.drawImage(preview, 0, 0);
    ctx.restore();
  }
});

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