<template>
  <swiper
    :spaceBetween="30"
    :effect="'fade'"
    :navigation="{
      prevEl: '.swiper-button-prev',
      nextEl: '.swiper-button-next',
    }"
    :centeredSlides="true"
    :loop="true"
    :autoplay="{
      delay: 5000,
      disableOnInteraction: false,
    }"
    :modules="modules"
    class="mySwiper"
    @slideChange="resetAnimation"
  >
    <swiper-slide v-for="banner in data" :key="banner.sort_order">
      <img class="slide-image" :src="banner.thumbnail" alt="Banner" />
    </swiper-slide>

    <!-- Custom Navigation Buttons with Images -->
    <div class="swiper-button-prev">
      <img src="/icon/icon_slide_left.svg" alt="Previous" />
    </div>
    <div class="swiper-button-next">
      <img src="/icon/icon_slide_right.svg" alt="Next" />
    </div>
  </swiper>
</template>

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

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import "swiper/css/zoom"; // Import Zoom module

// Import required modules
import { Autoplay, EffectFade, Navigation, Zoom } from "swiper/modules";

// Props
const props = defineProps({
  data: Array,
});

// Define the methods inside setup
// const resetAnimation = () => {
//   const images = document.querySelectorAll(".slide-image");
//   images.forEach((img) => {
//     img.classList.remove("zoom-out");
//     // Trigger reflow to restart the animation
//     void img.offsetWidth;
//     img.classList.add("zoom-out");
//   });
// };

// const initializeAnimation = () => {
//   const images = document.querySelectorAll(".slide-image");
//   images.forEach((img) => {
//     img.classList.add("zoom-out"); // Add animation class initially
//   });
// };

// // Initialize animation when the component is mounted
// onMounted(() => {
//   initializeAnimation();
// });

// Return the necessary properties and methods from the setup function
const modules = [Autoplay, EffectFade, Navigation, Zoom];
</script>

<style>
/* Swiper container */
.swiper {
  width: 100%;
  /* height: 90vh;  */
  /* Default height for desktop */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%; /* Ensure the image fills the container */
  object-fit: cover; /* Ensures images maintain their aspect ratio without being distorted or stretched */
}

/* Animation for Zoom-out effect */
.zoom-out {
  animation: zoomOut 10s ease-in-out infinite;
}

@keyframes zoomOut {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Custom navigation button styles */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-prev img,
.swiper-button-next img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}

/* Media Query for mobile responsiveness */
@media (max-width: 768px) {
  /* Adjust Swiper height for smaller screens */
  .swiper {
    height: auto; /* Full height on mobile */
  }

  /* Make navigation buttons smaller on mobile */
  .swiper-button-prev img,
  .swiper-button-next img {
    width: 30px;
    height: 30px;
  }

  /* Adjust margins and positioning for mobile screens */
  .swiper-button-prev,
  .swiper-button-next {
    top: 45%;
    width: 30px;
    height: 30px;
  }

  /* Adjust slide image size for full fit on mobile */
  .swiper-slide img {
    object-fit: cover; /* Ensure images are filled and maintain aspect ratio */
    height: 100%; /* Ensures that the height covers the container */
    width: 100%;
  }
}

/* Additional responsiveness for very small devices (phones in portrait mode) */
@media (max-width: 480px) {
  .swiper {
    height: auto; /* Maintain full screen height for very small devices */
  }

  /* Further reduce navigation button size */
  .swiper-button-prev img,
  .swiper-button-next img {
    width: 25px;
    height: 25px;
  }

  /* Ensure full fit for slide image on very small screens */
  .swiper-slide img {
    object-fit: cover; /* Ensure the image is not cropped */
    height: 100%;
    width: 100%;
  }
}
</style>
