import React, { FC, useState, useEffect, useCallback } from "react"
import * as css from "./index.module.css"

type ImageSlideshowProps = {
  images: Array<any>
}

const Slideshow: FC<ImageSlideshowProps> = ({ images }) => {
  const slideshowIntervalSeconds = 6.5

  const [visibleImages, setVisibleImages] = useState<any>({
    previous: images.length - 1,
    current: 0,
    next: 1,
  })

  const changeImage = useCallback(() => {
    setVisibleImages((i) => {
      return {
        previous: i.current,
        current: i.next,
        next: i.next >= images.length - 1 ? 0 : i.next + 1,
      }
    })
  }, [])

  let interval
  const visibilityChangeEventListener = () => {
    if (document.visibilityState === "hidden" && !!interval) {
      clearInterval(interval)
      return
    }

    if (document.visibilityState === "visible") {
      interval = setInterval(() => {
        changeImage()
      }, slideshowIntervalSeconds * 1000)
    }
  }

  useEffect(() => {
    if (document.visibilityState === "visible") {
      interval = setInterval(() => {
        changeImage()
      }, slideshowIntervalSeconds * 1000)
    }

    document.addEventListener("visibilitychange", visibilityChangeEventListener)

    return () => {
      clearInterval(interval)

      document.removeEventListener(
        "visibilitychange",
        visibilityChangeEventListener
      )
    }
  }, [])

  return (
    <div className={css.wrapper}>
      {images.map((Image, index) => (
        <div
          key={index}
          className={`${css.imageWrapper} ${
            visibleImages.previous === index ? css.previous : ""
          } ${visibleImages.next === index ? css.next : ""} ${
            visibleImages.current === index ? css.current : ""
          }`}
        >
          <Image
            className={css.image}
            alt={`${index}`}
          />
        </div>
      ))}
    </div>
  )
}

export default Slideshow