<template>
  <div class="relative">
    <!-- Slider Wrapper -->
    <div
        class="slider-wrapper flex transition-transform duration-500 gap-0 mb-6"
        :style="{ transform: `translateX(-${currentSlide * (480 + 24)}px)` }"
    >
      <div
          v-for="(slide, index) in slides"
          :key="index"
          class="slider-item flex-shrink-0 flex-1 mr-6 min-w-[480px]"
          :class="{'h-[309px]': !hasBackground, 'h-full': hasBackground}"
      >
        <div class="w-full p-4 rounded-[16px]" :class="{'bg-gray-50 h-full flex flex-col justify-between': !hasBackground, 'bg-white': hasBackground}">
          <div>
            <div class="mb-4">
              <img
                  v-if="slide.image"
                  :src="slide.image"
                  alt="Slide Image"
                  class="rounded-[8px] h-[220px] w-full object-cover"
              />
            </div>
            <div v-if="slide.tags && slide.tags.length" class="flex gap-2">
              <span
                  v-for="tag in slide.tags"
                  :key="tag"
                  class="bg-navy-50 border border-navy-200 text-navy-700 px-2 py-0.5 rounded-[6px] text-sm"
              >
                {{ tag }}
              </span>
            </div>
            <h3 class="my-3">
              <a class="text-[24px] font-semibold text-gray-900 leading-[32px] hover:underline"
                 :href="formatUrl(slide.url)" target="_blank">
                {{ slide?.title }}
              </a>
            </h3>
            <p
                class="text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis"
                v-html="slide?.description"
            ></p>
            <div v-if="slide?.type === 'event'" class="flex gap-2 text-gray-600 mt-6 font-semibold">
              <Clock class="w-4 h-4 mt-[3px]"></Clock>
              <div class="text-sm" v-html="slide?.line_1"></div>
            </div>
            <div v-if="slide.type === 'event'" class="flex gap-2 text-gray-600 mt-2 font-semibold">
              <Ticket class="w-4 h-4 mt-[3px]"></Ticket>
              <div class="text-sm" v-html="slide?.line_2"></div>
            </div>
          </div>
          <div class="border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center">
            <VCarouselPrimaryButton :button="slide.primary_button" />
            <a
                v-if="slide.secondary_button"
                target="_blank"
                :href="formatUrl(slide.secondary_button.url)"
                class="text-sm text-gray-600 hover:text-gray-800"
            >
              {{ slide.secondary_button.title ?? 'Learn more' }}
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Control Buttons -->
    <div class="absolute top-[-65px] right-4 flex gap-4">
      <button
          @click="prevSlide"
          class="p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
      >
        <ChevronLeft class="w-6 h-6" />
      </button>
      <button
          @click="nextSlide"
          class="p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
      >
        <ChevronRight class="w-6 h-6" />
      </button>
    </div>
    <div v-if="component?.button" class="flex justify-center mb-[40px]">
      <a
          class="border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base"
          :href="formatUrl(component.button.url)"
         :target="component.button.open_in_new_tab ? '_blank' : ''">
        {{ component.button.title }}
        <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import Clock from "@/assets/img/icons/clock.svg";
import ChevronRight from "@/assets/img/icons/chevron-right.svg";
import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
import Ticket from "@/assets/img/icons/ticket-02.svg";
import DefaultPrimaryButton from "@/components/presenters/overridables/VCarouselPrimaryButton.vue";
import { formatUrl } from "@/components/helpers/common";

// Inject the FileUpload component or fallback to the default one
const VCarouselPrimaryButton = inject("VCarouselPrimaryButton", DefaultPrimaryButton);

const props = defineProps({
  component: {
    required: true,
    type: Object,
  },
  hasBackground: {
    type: Boolean,
    default: true,
  },
});

const currentSlide = ref(0); // Start at 0
const itemsToShow = 4; // Number of items to show at a time
const slides = [...props.component.content?.items || []];

// Navigate to the next slide
const nextSlide = () => {
  if (currentSlide.value <= slides.length - itemsToShow) {
    currentSlide.value++;
  }
};

// Navigate to the previous slide
const prevSlide = () => {
  if (currentSlide.value > 0) {
    currentSlide.value--;
  }
};
</script>
<style>
.multiline-ellipsis {
  height: 100%;
  display: -webkit-box; /* Use a flex-like box model */
  -webkit-box-orient: vertical; /* Set the box orientation to vertical */
  overflow: hidden; /* Hide overflowing content */
  text-overflow: ellipsis; /* Add ellipsis (...) for overflowed text */
  -webkit-line-clamp: 4; /* Limit the text to 3 lines */
}
</style>