<script setup>
import emblaCarouselVue from "embla-carousel-vue";
import RitzenbergenLib from "../ritzenbergenlib.ts";
import { onMounted, ref } from "vue";
import EmblaItem from "./EmblaItem.vue";

const emblaApi = ref();

const [emblaRef, emblaInstance] = emblaCarouselVue({ loop: true });

let timeout=false;

onMounted(() => {
  emblaApi.value = emblaInstance.value;
  setInterval(()=>{
    if(!timeout) emblaApi.value?.scrollNext();
  }, 2000);
});

const prev = () => {
  emblaApi.value?.scrollPrev();
  addTimeout();
};

const next = () => {
  emblaApi.value?.scrollNext();
  addTimeout();
};
function addTimeout(){
  timeout=true;
  setTimeout(()=>{
    timeout=false;
  }, 4000);
}

defineProps({
  src: {
    type: Array,
    required: true,
  },
  links: {
    type: Array,
    required: true,
  },
});
</script>

<template>
  <div class="embla" ref="emblaRef">
    <div class="embla__container">
      <EmblaItem v-for="el, i in src" :src="el" :link="links[i]" />
    </div>
    <button class="embla__button embla__button--prev" @click="prev">
      <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
      <span class="sr-only visually-hidden visually-hidden">Previous</span>
    </button>
    <button class="embla__button embla__button--next" @click="next">
      <span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
      <span class="sr-only visually-hidden visually-hidden">Next</span>
    </button>
  </div>
</template>

<style scoped></style>
