<script>
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide } from "vue3-carousel";

export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      currentImageSrc: "", // Gambar besar yang sedang ditampilkan
      thumbnails: [], // Daftar thumbnail
      currentIndex: 0, // Indeks aktif
    };
  },
  mounted() {
    this.initializeCarousel();
  },
  methods: {
    initializeCarousel() {
      this.thumbnails = this.data.map((src, index) => ({
        src, // URL gambar
        active: index === this.currentIndex, // Tandai thumbnail aktif
        visible: true, // Semua thumbnail terlihat
      }));
      this.updateCurrentImage();
    },
    updateCurrentImage() {
      const thumbnail = this.thumbnails[this.currentIndex];
      if (thumbnail) {
        this.currentImageSrc = thumbnail.src;
      }
    },
    activateThumbnail(thumbnail, index) {
      this.currentIndex = index;
      this.updateCurrentImage();
      this.thumbnails.forEach((t) => (t.active = false));
      thumbnail.active = true;
    },
    showPrevious() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.updateCurrentImage();
      }
    },
    showNext() {
      if (this.currentIndex < this.thumbnails.length - 1) {
        this.currentIndex++;
        this.updateCurrentImage();
      }
    },
  },
};
</script>

<template>
  <div>
    <div class="container mx-auto">
      <div class="carousel-hosea">
        <div class="flex items-center lg:space-x-10 space-x-5">
          <button @click="showPrevious" class="text-[#EC2029] border-none rounded-xl cursor-pointer text-6xl">&lt;</button>

          <div class="current-image lg:h-[50vh] md:h-72 h-40 w-full mx-auto rounded-[30px]">
            <img :src="currentImageSrc" alt="Current image" class="h-full w-full object-cover rounded-[30px]" />
          </div>

          <button @click="showNext" class="text-[#EC2029] border-none rounded-xl cursor-pointer text-6xl">&gt;</button>
        </div>

        <div class="mt-8 lg:mx-16 md:mx-16 mx-10">
          <Carousel :breakpoints="breakpoints" :mouseDrag="true" class="overflow-visible w-full">
            <Slide v-for="(thumbnail, index) in thumbnails" class="mx-4">
              <div class="relative">
                <div class="thumbnail-button h-24 w-40 mx-auto opacity-70 hover:opacity-100 transition-opacity duration-300 ease-in-out" @click="activateThumbnail(thumbnail, index)" :aria-current="thumbnail.active ? 'true' : null">
                  <img :src="thumbnail.src" alt="Thumbnail" class="w-full h-full object-cover rounded-xl" />
                </div>
              </div>
            </Slide>

            <template class="relative" #addons>
              <Navigation />
            </template>
          </Carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const breakpoints = {
  300: {
    itemsToShow: 1.6,
    snapAlign: "start",
  },
  400: {
    itemsToShow: 1.6,
    snapAlign: "start",
  },
  610: {
    itemsToShow: 3,
    snapAlign: "start",
  },
  710: {
    itemsToShow: 3.6,
    snapAlign: "start",
  },
  1000: {
    itemsToShow: 4,
    snapAlign: "start",
  },
  1202: {
    itemsToShow: 4.8,
    snapAlign: "start",
  },
  1310: {
    itemsToShow: 4.8,
    snapAlign: "start",
  },
};
</script>

<style>
/* Main Carousel Container */

.thumbnail {
  position: relative;
}

.thumbnail-button {
  border: none;
  padding: 2px;
  background: none;
  cursor: pointer;
  outline: none;
}

.thumbnail-button[aria-current="true"] img {
  opacity: 1;
  border: 2px solid #007bff;
}

.previous-button,
.next-button {
  color: rgb(255, 0, 0);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 65px;
}
</style>
