<template>
  <Swiper
      :modules="modules"
      :pagination="pagination"
      :virtual="virtual"
      @sliderMove="hapticScroll"
      class="radius-box"
  >
    <SwiperSlide
        v-for="(image, index) in images"
        :key="image.url"
        :virtualIndex="index"
    >
      <img
          :src="image.url"
          loading="lazy"
          :alt="image.alt"
          class="w-full h-full radius-box"
          @load="onLoad(image.url)"
          @error="onLoad(image.url)"
      />
      <div v-if="!loaded[image.url]" class="swiper-lazy-preloader"></div>
    </SwiperSlide>
  </Swiper>
</template>

<script setup>
import {ref} from 'vue';
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Pagination, Virtual} from 'swiper/modules';
import {useHapticScroll} from "@/composables/useHapticScroll.js";
import 'swiper/css';
import 'swiper/css/pagination';

const props = defineProps({
  images: {
    type: Array,
    default: () => [],
  },
});

const modules = [Pagination, Virtual];
const hapticScroll = useHapticScroll();
const pagination = {
  clickable: true,
  dynamicBullets: false,
};
const virtual = {
  enabled: true,
  addSlidesAfter: 1,
  addSlidesBefore: 0,
};

const loaded = ref({});
const onLoad = (url) => {
  if (url) loaded.value[url] = true;
};
</script>
