---
import type { Translations } from '../i18n/translations'

export interface Props {
  t: Translations['preview']
}

const { t } = Astro.props
const slides = [
  "/assets/preview-phone.png",
  "/assets/preview-phone.png",
  "/assets/preview-phone.png",
]
---

<section class="app-preview">
  <div class="app-preview__header">
    <p class="app-preview__title">
      {t.title}
    </p>
    <p class="app-preview__description">
      {t.description}
    </p>
  </div>

  <div class="app-preview__carousel" id="carousel">
    <div class="app-preview__side-phone">
      <img id="phone-left" alt="" class="app-preview__phone-image" src={slides[slides.length - 1]} />
    </div>

    <div class="app-preview__control-wrap">
      <div class="app-preview__control-inner">
        <button id="btn-prev" class="app-preview__button">
          <img alt={t.previous} class="app-preview__button-icon" src="/assets/preview-arrow-left.svg" />
        </button>
      </div>
    </div>

    <div class="app-preview__center-phone">
      <img id="phone-center" alt={t.phoneAlt} class="app-preview__phone-image" src={slides[0]} />
    </div>

    <div class="app-preview__control-wrap">
      <div class="app-preview__control-inner">
        <button id="btn-next" class="app-preview__button">
          <img alt={t.next} class="app-preview__button-icon app-preview__button-icon--next" src="/assets/preview-arrow-right.svg" />
        </button>
      </div>
    </div>

    <div class="app-preview__side-phone">
      <img id="phone-right" alt="" class="app-preview__phone-image" src={slides[1]} />
    </div>
  </div>
</section>

<script>
  const carousel = document.getElementById('carousel')!;
  const allSlides: string[] = JSON.parse(carousel.dataset.slides || '[]');

  const leftImg = document.getElementById('phone-left') as HTMLImageElement;
  const centerImg = document.getElementById('phone-center') as HTMLImageElement;
  const rightImg = document.getElementById('phone-right') as HTMLImageElement;
  const btnPrev = document.getElementById('btn-prev')!;
  const btnNext = document.getElementById('btn-next')!;

  let current = 0;

  function mod(n: number, m: number) { return ((n % m) + m) % m; }

  function transition(next: number) {
    [leftImg, centerImg, rightImg].forEach(img => img && (img.style.opacity = '0'));
    setTimeout(() => {
      current = mod(next, allSlides.length);
      if (leftImg) leftImg.src = allSlides[mod(current - 1, allSlides.length)];
      if (centerImg) centerImg.src = allSlides[current];
      if (rightImg) rightImg.src = allSlides[mod(current + 1, allSlides.length)];
      [leftImg, centerImg, rightImg].forEach(img => img && (img.style.opacity = '1'));
    }, 200);
  }

  if (btnPrev) btnPrev.addEventListener('click', () => transition(current - 1));
  if (btnNext) btnNext.addEventListener('click', () => transition(current + 1));
</script>

<script define:vars={{ slides }}>
  document.getElementById('carousel').dataset.slides = JSON.stringify(slides);
</script>
