import { useMemo } from "react";
import { motion } from "framer-motion";
import Image from "next/image";
import { BsFillTrashFill } from "react-icons/bs";
import { AiFillCheckCircle } from "react-icons/ai";

import { useCollection } from "./useCollection";
import { Button } from "../button";
import { useUser } from "@/utils/useUser";

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, updateVisibility, remove } = useCollection(id);
  const { user } = useUser();

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

  console.log(user);

  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 relative 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"
      >
        {user?.is_admin && (
          <div className="absolute p-2 rounded-full top-4 left-4 flex items-center justify-start gap-2 bg-black/20 backdrop-blur">
            {!collection?.is_visible && (
              <Button theme="white" onClick={updateVisibility}>
                <AiFillCheckCircle />
                Validate
              </Button>
            )}
            <Button theme="danger" onClick={remove}>
              <BsFillTrashFill />
              Delete
            </Button>
          </div>
        )}
        <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>
  );
};