let pause = false;

if (document.querySelector(".homepage-hero__image-container")) {
  const images = [
    ...document.querySelectorAll(".homepage-hero__image-container"),
  ];

  if (images.length > 1) {
    images[0].classList.add("active");
    setInterval(() => activeImage(images), 5000);
  } else {
    images[0].classList.add("static");
  }
}

function activeImage(images) {
  if (!pause) {
    const activeImage = images.find((image) =>
      image.classList.contains("active")
    );
    const index = images.indexOf(activeImage);
    const nextIndex = index + 1 === images.length ? 0 : index + 1;
    images[index].classList.remove("active");
    images[nextIndex].classList.add("active");
  }
}

if (document.querySelector(".hero-image__toggle-button")) {
  const toggleButton = document.querySelector(".hero-image__toggle-button");
  const pauseButton = document.querySelector(".home-page-hero-pause-button");
  const playButton = document.querySelector(".home-page-hero-play-button");

  toggleButton.addEventListener("click", () => {
    pause = !pause;
    if (pause) {
      playButton.classList.add("active");
      pauseButton.classList.remove("active");
      if (document.querySelector(".home-header-slider__item-video")) {
        document.querySelector(".home-header-slider__item-video").pause();
      }
    } else {
      playButton.classList.remove("active");
      pauseButton.classList.add("active");
      if (document.querySelector(".home-header-slider__item-video")) {
        document.querySelector(".home-header-slider__item-video").play();
      }
    }
  });
}