"use client"
import { AnimatePresence, motion } from "framer-motion"

import ArrowRightIcon from "@/components/Icons/ArrowRight"
import CloseIcon from "@/components/Icons/Close"
import Image from "@/components/Image"
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 type { FullViewProps } from "@/types/components/lightbox/lightbox"

export default function FullView({
  image,
  onClose,
  onNext,
  onPrev,
  currentIndex,
  totalImages,
}: FullViewProps) {
  return (
    <div className={styles.fullViewContainer}>
      <Button
        intent="text"
        size="small"
        variant="icon"
        className={styles.fullViewCloseButton}
        onClick={onClose}
      >
        <CloseIcon
          width={32}
          height={32}
          className={styles.fullViewCloseIcon}
          color="white"
        />
      </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.imageSizes.medium}
            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
              alt={image.metaData.altText}
              fill
              src={image.imageSizes.medium}
              style={{ objectFit: "cover" }}
            />

            <div className={styles.fullViewFooter}>
              {image.metaData.title && (
                <Body color="white">{image.metaData.title}</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>
  )
}
