"use client"
import { AnimatePresence, motion } from "motion/react"
import { useEffect, useState } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"

import FullView from "./FullView"
import Gallery from "./Gallery"

import styles from "./lightbox.module.css"

import type { LightboxProps } from "@/types/components/lightbox/lightbox"

export default function Lightbox({
  images,
  dialogTitle,
  onClose,
  activeIndex = 0,
  hideLabel,
}: LightboxProps) {
  const [selectedImageIndex, setSelectedImageIndex] = useState(activeIndex)
  const [isFullView, setIsFullView] = useState(false)

  useEffect(() => {
    setSelectedImageIndex(activeIndex)
  }, [activeIndex])

  function handleClose() {
    setSelectedImageIndex(0)
    onClose()
  }

  function handleNext() {
    setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
  }

  function handlePrev() {
    setSelectedImageIndex(
      (prevIndex) => (prevIndex - 1 + images.length) % images.length
    )
  }

  useEffect(() => {
    function handlePopState() {
      handleClose()
    }

    window.history.pushState(null, "", window.location.href)
    window.addEventListener("popstate", handlePopState)

    return () => {
      window.removeEventListener("popstate", handlePopState)
    }
    /* eslint-disable-next-line react-hooks/exhaustive-deps */
  }, [])

  return (
    <ModalOverlay
      isOpen={true}
      onOpenChange={handleClose}
      className={styles.overlay}
      isDismissable
    >
      <Modal>
        <AnimatePresence>
          <Dialog aria-label={dialogTitle}>
            <motion.div
              className={`${styles.content} ${
                isFullView ? styles.fullViewContent : styles.galleryContent
              }`}
              initial={{ opacity: 0, scale: 0.95, x: "-50%", y: "-50%" }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              transition={{ duration: 0.2 }}
            >
              {isFullView ? (
                <FullView
                  image={images[selectedImageIndex]}
                  onClose={() => setIsFullView(false)}
                  onNext={handleNext}
                  onPrev={handlePrev}
                  currentIndex={selectedImageIndex}
                  totalImages={images.length}
                  hideLabel={hideLabel}
                />
              ) : (
                <Gallery
                  images={images}
                  onClose={handleClose}
                  onSelectImage={(image) => {
                    setSelectedImageIndex(
                      images.findIndex((img) => img === image)
                    )
                  }}
                  onImageClick={() => setIsFullView(true)}
                  selectedImage={images[selectedImageIndex]}
                  hideLabel={hideLabel}
                />
              )}
            </motion.div>
          </Dialog>
        </AnimatePresence>
      </Modal>
    </ModalOverlay>
  )
}