import React, { useState } from 'react'
import { createPortal } from 'react-dom'
import { IoMdArrowDropleft, IoMdArrowDropright } from 'react-icons/io'
import { useTranslation } from 'react-i18next'
import { MdOutlineClose } from 'react-icons/md'
import { Loading } from 'ui'

interface SlideshowProps {
  showSlideShow: boolean
  setShowSlideShow: (showSlideShow: boolean) => void
  images: string[]
  loading: boolean
}

export const ImageSlideshow: React.FC<SlideshowProps> = (props) => {
  const { images, loading, setShowSlideShow, showSlideShow } = props
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const { t } = useTranslation()

  const goToPreviousImage = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1,
    )
  }

  const goToNextImage = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === images.length - 1 ? 0 : prevIndex + 1,
    )
  }

  const closeSlideShow = () => {
    setShowSlideShow(false)
    setCurrentImageIndex(0)
  }

  if (!showSlideShow) {
    return null
  }

  const slideshowContent = (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black bg-opacity-95">
      {loading ? (
        <Loading />
      ) : images.length === 0 ? (
        <>
          <button
            type="button"
            className="absolute right-4 top-4 bg-black bg-opacity-80 hover:bg-opacity-50 text-white font-bold p-2 rounded-full transition-all"
            onClick={closeSlideShow}
          >
            <MdOutlineClose size={25} className="text-white" />
          </button>
          <p className="text-white text-xl">
            {t('message.no_image_available')}
          </p>
        </>
      ) : (
        <>
          <button
            type="button"
            className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-80 hover:bg-opacity-50 text-white font-bold py-2 px-4 rounded transition-all z-10"
            onClick={goToPreviousImage}
          >
            <IoMdArrowDropleft size={25} />
          </button>

          <button
            type="button"
            className="absolute right-4 top-4 bg-black bg-opacity-80 hover:bg-opacity-50 text-white font-bold p-2 rounded-full transition-all z-10"
            onClick={closeSlideShow}
          >
            <MdOutlineClose size={25} className="text-white" />
          </button>

          <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded z-10">
            {currentImageIndex + 1} / {images.length}
          </div>

          <img
            className="max-w-[90vw] max-h-[90vh] object-contain"
            src={images[currentImageIndex]}
            alt={`${currentImageIndex + 1}`}
          />

          <button
            type="button"
            className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-80 hover:bg-opacity-50 text-white font-bold py-2 px-4 rounded transition-all z-10"
            onClick={goToNextImage}
          >
            <IoMdArrowDropright size={25} />
          </button>
        </>
      )}
    </div>
  )

  return createPortal(slideshowContent, document.body)
}