web/components/Lightbox/index.tsx

"use client"
import * as Dialog from "@radix-ui/react-dialog"
import { AnimatePresence, motion } from "framer-motion"
import Image from "next/image"
import React, { useState } from "react"

import { ChevronRightIcon } from "@/components/Icons"
import ArrowRightIcon from "@/components/Icons/ArrowRight"
import CloseIcon from "@/components/Icons/Close"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

import {
  FullViewProps,
  GalleryProps,
  LightboxProps,
} from "@/types/components/lightbox/lightbox"

export function Lightbox({ images, children }: LightboxProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [selectedImageIndex, setSelectedImageIndex] = useState(0)
  const [isFullView, setIsFullView] = useState(false)

  const handleOpenChange = (open: boolean) => {
    if (!open) {
      setTimeout(() => {
        setIsOpen(false)
        setSelectedImageIndex(0)
        setIsFullView(false)
      }, 300) // 300ms delay
    } else {
      setIsOpen(true)
    }
  }

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

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

  const triggerElement = React.Children.map(
    children,
    function mapChild(child): React.ReactNode {
      if (React.isValidElement(child)) {
        if (child.props.id === "lightboxTrigger") {
          return React.cloneElement(child, {
            onClick: () => setIsOpen(true),
          } as React.HTMLAttributes<HTMLElement>)
        } else if (child.props.children) {
          return React.cloneElement(child, {
            children: React.Children.map(child.props.children, mapChild),
          } as React.HTMLAttributes<HTMLElement>)
        }
      }
      return child
    }
  )

  return (
    <>
      {triggerElement}
      <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
        <AnimatePresence>
          {isOpen && (
            <Dialog.Portal forceMount>
              <Dialog.Overlay asChild>
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.2 }}
                  className={styles.overlay}
                />
              </Dialog.Overlay>
              <Dialog.Content asChild>
                <motion.div
                  className={styles.content}
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
                  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}
                    />
                  ) : (
                    <Gallery
                      images={images}
                      onClose={() => setIsOpen(false)}
                      onSelectImage={(image) => {
                        setSelectedImageIndex(
                          images.findIndex((img) => img.url === image.url)
                        )
                      }}
                      onImageClick={() => setIsFullView(true)}
                      selectedImage={images[selectedImageIndex]}
                    />
                  )}
                </motion.div>
              </Dialog.Content>
            </Dialog.Portal>
          )}
        </AnimatePresence>
      </Dialog.Root>
    </>
  )
}

function Gallery({
  images,
  onClose,
  onSelectImage,
  onImageClick,
  selectedImage,
}: GalleryProps) {
  const mainImage = selectedImage || images[0]
  const mainImageIndex = images.findIndex((img) => img.url === mainImage.url)

  function getThumbImages() {
    const thumbs = []
    for (let i = 1; i <= 5; i++) {
      const index = (mainImageIndex + i) % images.length
      thumbs.push(images[index])
    }
    return thumbs
  }

  const handleNext = () => {
    const nextIndex = (mainImageIndex + 1) % images.length
    onSelectImage(images[nextIndex])
  }

  const handlePrev = () => {
    const prevIndex = (mainImageIndex - 1 + images.length) % images.length
    onSelectImage(images[prevIndex])
  }

  return (
    <div className={styles.galleryContainer}>
      <Button
        intent="text"
        size="small"
        theme="base"
        className={styles.desktopGalleryCloseButton}
        onClick={onClose}
      >
        <CloseIcon width={32} height={32} />
      </Button>
      {/* Desktop Gallery */}
      <div className={styles.desktopGallery}>
        <div className={styles.galleryHeader}>
          <div className={styles.imageCaption}>
            <Caption color="textMediumContrast">{mainImage.alt}</Caption>
          </div>
        </div>
        <div className={styles.mainImageWrapper}>
          <AnimatePresence initial={false} mode="wait">
            <motion.div
              key={mainImage.url}
              className={styles.mainImageContainer}
              initial={{ opacity: 0, x: 300 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -300 }}
              transition={{ duration: 0.3 }}
            >
              <Image
                src={mainImage.url}
                alt={mainImage.alt}
                layout="fill"
                objectFit="cover"
                onClick={onImageClick}
              />
            </motion.div>
          </AnimatePresence>
          <motion.button
            className={`${styles.navigationButton} ${styles.galleryPrevButton}`}
            onClick={handlePrev}
          >
            <ArrowRightIcon
              color="burgundy"
              className={styles.leftTransformIcon}
            />
          </motion.button>
          <motion.button
            className={`${styles.navigationButton} ${styles.galleryNextButton}`}
            onClick={handleNext}
          >
            <ArrowRightIcon color="burgundy" />
          </motion.button>
        </div>
        <div className={styles.thumbnailGrid}>
          <AnimatePresence initial={false}>
            {getThumbImages().map((image, index) => (
              <motion.div
                key={image.url}
                className={styles.thumbnailContainer}
                onClick={() => onSelectImage(image)}
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -50 }}
                transition={{ duration: 0.2, delay: index * 0.05 }}
              >
                <Image
                  src={image.url}
                  alt={image.alt}
                  layout="fill"
                  objectFit="cover"
                />
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      </div>

      {/* Mobile Gallery */}
      <div className={styles.mobileGallery}>
        <Button intent="text" size="small" onClick={onClose}>
          <ChevronRightIcon
            color="black"
            width={32}
            height={32}
            className={styles.leftTransformIcon}
          />
        </Button>
        <div className={styles.mobileGalleryContent}>
          <div className={styles.thumbnailGrid}>
            {images.map((image, index) => (
              <motion.div
                key={image.url}
                className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
                onClick={() => onImageClick()}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: index * 0.05 }}
              >
                <Image
                  src={image.url}
                  alt={image.alt}
                  layout="fill"
                  objectFit="cover"
                />
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

function FullView({
  image,
  onClose,
  onNext,
  onPrev,
  currentIndex,
  totalImages,
}: FullViewProps) {
  return (
    <div className={styles.fullViewContainer}>
      <Button
        intent="text"
        size="small"
        className={styles.fullViewCloseButton}
        onClick={onClose}
      >
        <ChevronRightIcon
          color="white"
          width={32}
          height={32}
          className={styles.leftTransformIcon}
        />
      </Button>
      <div className={styles.fullViewHeader}>
        <span className={styles.imagePosition}>
          <Caption color="white">
            {`${currentIndex + 1} / ${totalImages}`}
          </Caption>
        </span>
      </div>
      <div className={styles.fullViewImageContainer}>
        <AnimatePresence initial={false} custom={currentIndex}>
          <motion.div
            key={image.url}
            custom={currentIndex}
            initial={{ opacity: 0, x: 300 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -300 }}
            transition={{ duration: 0.3 }}
            className={styles.fullViewImage}
          >
            <Image
              src={image.url}
              alt={image.alt}
              layout="fill"
              objectFit="cover"
            />

            <div className={styles.fullViewFooter}>
              <Body color="white">{image.alt}</Body>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>

      <motion.button
        className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
        onClick={onPrev}
      >
        <ArrowRightIcon color="burgundy" className={styles.leftTransformIcon} />
      </motion.button>
      <motion.button
        className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
        onClick={onNext}
      >
        <ArrowRightIcon color="burgundy" />
      </motion.button>
    </div>
  )
}