<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));
});

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

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

  const preview = projectPreviews.value[store.currentProject];
  if (!preview) return;

  const x = (256 - preview.width) / 2;
  const y = (192 - preview.height) / 2 + 10;
  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);
});

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