import { useMemo } from "react";
import { motion } from "framer-motion";
import Image from "next/image";

import { arrayBufferToBase64 } from "@/utils";
import { useCollection } from "./useCollection";

interface Props {
  id: string;
  onClose: () => void;
}

const dropIn = {
  hidden: {
    opacity: 0,
  },
  visible: {
    y: "0",
    opacity: 1,
    transition: {
      duration: 0.1,
      type: "spring",
      damping: 25,
      stiffness: 500,
    },
  },
  exit: {
    opacity: 0,
  },
};

export const Modal: React.FC<Props> = ({ id, onClose }) => {
  const { collection } = useCollection(id);

  if (!collection) return null;

  const formatDate = useMemo(() => {
    if (!collection) return;
    const date = new Date(collection.createdAt);
    return date.toLocaleDateString();
  }, [collection?.createdAt]);

  return (
    <motion.div
      onClick={onClose}
      className="fixed top-0 w-screen h-screen left-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-6"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <motion.div
        onClick={(e) => e.stopPropagation()}
        className="max-w-2xl h-auto w-full z-[1] rounded-3xl overflow-hidden flex items-center justify-center flex-col gap-4 bg-white/30 backdrop-blur-sm px-2 pb-2 pt-2"
        variants={dropIn}
        initial="hidden"
        animate="visible"
        exit="exit"
      >
        <Image
          src={`https://huggingface.co/datasets/enzostvs/stable-diffusion-tpu-generations/resolve/main/images/${collection.file_name}.png?raw=true`}
          alt="Generated image"
          className="object-center object-contain w-full h-full rounded-2xl"
          width={1024}
          height={1024}
        />
        <div
          className="bg-cover bg-center w-full h-full rounded-2xl bg-no-repeat z-[-1] absolute top-0 left-0 opacity-90 blur-xl"
          style={{
            backgroundImage: `url(https://huggingface.co/datasets/enzostvs/stable-diffusion-tpu-generations/resolve/main/images/${collection.file_name}.png?raw=true)`,
          }}
        />
        <div className="text-left w-full px-4 pb-3 pt-2">
          <p className="text-sm font-medium text-white/60 mb-1">{formatDate}</p>
          <p className="text-xl font-semibold text-white lowercase leading-snug">
            {collection.prompt}
          </p>
        </div>
      </motion.div>
    </motion.div>
  );
};