<script>let className = "";
import { flip } from "svelte/animate";
let timer;
let currentSlide = 0;
export let slides = [];
export let interval = 5e3;
$: currentSlide;
function selectSlide(i = 0) {
  if (i === currentSlide) return;
  currentSlide = i;
  if (currentSlide >= slides.length) {
    currentSlide = 0;
  }
  var firstSlide = slides[0];
  slides = slides.slice(1, slides.length);
  slides = slides.concat(firstSlide);
}
function resetTimer(addin = 0) {
  selectSlide(currentSlide + addin);
  clearInterval(timer);
  timer = setInterval(() => {
    selectSlide(currentSlide + 1);
  }, interval);
}
resetTimer();
</script>

<div class="container">
  <div class="content">
    {#each slides as slide, i (slide)}
      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <li animate:flip={{ duration: 1000 }} class="carousel" on:click={() => resetTimer(1)}>
        <slot name="slide" {slide} />
      </li>
    {/each}
  </div>
  <div class="slider-dots">
    {#each slides as slide, i}
      <img src={i === currentSlide ? '/images/selected-dot.svg' : '/images/dot.svg'} alt="dot" class="dot" />
    {/each}
  </div>
</div>

<style>
  .container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 1.5rem;
    overflow: hidden;
  }

  .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 1.5rem;
  }
  .carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 1.5rem;
  }

  .carousel:last-child {
    /* prevents the fly around from showing */
    visibility: hidden;
  }

  .slider-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1.75rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.56rem;
  }
</style>
