web/packages/design-system/lib/components/Lightbox/FullView/index.tsx

"use client"

import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"
import { useIntl } from "react-intl"

import Image from "../../Image"

import { IconButton } from "../../IconButton"
import { Typography } from "../../Typography"

import { LightboxImage } from "../index"
import styles from "./fullView.module.css"
import { cx } from "class-variance-authority"
import { ImageCounter } from "../../ImageCounter"
import { animationVariants, useKeyboardNavigation } from "../util"

type FullViewProps = {
  image: LightboxImage
  onClose: () => void
  onNext: () => void
  onPrev: () => void
  currentIndex: number
  totalImages: number
  hideLabel?: boolean
}

export function FullView({
  image,
  onClose,
  onNext,
  onPrev,
  currentIndex,
  totalImages,
  hideLabel,
}: FullViewProps) {
  const intl = useIntl()
  const [slideDirection, setSlideDirection] = useState<"left" | "right">("left")

  function handleSwipe(offset: number) {
    if (offset > 30) {
      setSlideDirection("right")
      onPrev()
    }
    if (offset < -30) {
      setSlideDirection("left")
      onNext()
    }
  }

  function handleNext() {
    setSlideDirection("left")
    onNext()
  }
  function handlePrev() {
    setSlideDirection("right")
    onPrev()
  }
  useKeyboardNavigation(handlePrev, handleNext)

  return (
    <div className={styles.fullView}>
      <IconButton
        variant="Muted"
        className={styles.closeButton}
        onPress={onClose}
        aria-label={intl.formatMessage({
          id: "common.close",
          defaultMessage: "Close",
        })}
        iconName="close"
      />
      <div className={styles.header}>
        <ImageCounter number={`${currentIndex + 1} / ${totalImages}`} />
      </div>
      <div className={styles.content}>
        <AnimatePresence initial={false} custom={slideDirection}>
          <motion.div
            key={image.src}
            custom={slideDirection}
            variants={animationVariants}
            initial="initial"
            animate="animate"
            exit="exit"
            transition={{ duration: 0.3 }}
            className={styles.motionContainer}
            drag="x"
            onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
          >
            <div className={styles.imageWrapper}>
              <Image
                alt={image.alt}
                fill
                sizes="90vw"
                src={image.src}
                className={styles.image}
              />
              {image.caption && !hideLabel ? (
                <Typography variant="Body/Paragraph/mdRegular">
                  <p className={styles.caption}>{image.caption}</p>
                </Typography>
              ) : null}
            </div>
          </motion.div>
        </AnimatePresence>
      </div>

      <IconButton
        variant="Muted"
        onPress={handlePrev}
        className={cx(styles.navigationButton, styles.prev)}
        iconName="arrow_back"
      />
      <IconButton
        variant="Muted"
        onPress={handleNext}
        className={cx(styles.navigationButton, styles.next)}
        iconName="arrow_forward"
      />
    </div>
  )
}