<template>
  <div
    class="auto-grid"
    role="grid"
    multiselectable="true"
    style="--min: 15rem; --gap: 0.5rem"
  >
    <figure
      v-for="image in tab.images"
      class="image"
      role="gridcell"
      :aria-selected="isSelected(image)"
      :data-count="
        tab.selectedImages.includes(image)
          ? tab.selectedImages.indexOf(image) + 1
          : undefined
      "
      @click="ArrayUtils.toggle(tab.selectedImages, image)"
    >
      <img :src="image.url" :alt="image.alt" />
    </figure>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
import { computed } from "vue";
import ArrayUtils from "../../../../utils/array";

const { id } = defineProps({
  id: String,
});
const { tabs } = storeToRefs(useAddImagesModalStore());

const tab = computed(() => {
  return tabs.value.find((tab) => tab.id === id);
});

function isSelected(image) {
  return tab.value.selectedImages.includes(image);
}
</script>
