<template>
  <swiper-container ref="swiperEl" pagination="true">
    <swiper-slide
        v-for="image in images"
        lazy
    >
      <img
          :src="image.url"
          :alt="image.alt"
          loading="lazy"
      />
    </swiper-slide>
  </swiper-container>
</template>

<script setup>
import {onMounted, ref} from "vue";

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

const swiperEl = ref(null);

let haptic = true;

onMounted(async () => {
  swiperEl.value?.addEventListener('swiperactiveindexchange', (event) => {
    window.Telegram.WebApp.HapticFeedback.selectionChanged();
  });

  swiperEl.value?.addEventListener('swiperprogress', (num) => {
    if (haptic === false) return;
    window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
    haptic = false;
    setTimeout(() => haptic = true, 50);
  });

  swiperEl.value?.addEventListener('swiperreachbeginning', (event) => {
    window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
  });
  swiperEl.value?.addEventListener('swiperreachend', (event) => {
    window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
  });
});
</script>
