"use client";
import { Dispatch, SetStateAction } from "react";
import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";
import { cn, formatTimestampToSpanishDate, truncateHtmlPreservingTags } from "@/lib/utils";
import { AnimatedArrow, NavigationLink } from "@/components/ui";
import { BlogPost } from "../blog/types";

type BlogCardProps = {
  post: BlogPost;
  animationComplete: boolean;
  setAnimationComplete: Dispatch<SetStateAction<boolean>>;
  i: number;
  isInView: boolean;
  arr: BlogPost[];
  position: number | string;
};

const BlogCard = ({ post, animationComplete, setAnimationComplete, i, isInView, arr, position }: BlogCardProps) => {
  const { date, category, title, slug, description, image } = post;

  return (
    <div
      key={title}
      className={cn(
        "grid bg-contigo-gris-claro",
        !i
          ? "rounded-[1.5rem] md:grid-cols-2 col-span-full"
          : "rounded-[0.8125rem] grid-cols-[33%_1fr] gap-2.5 md:gap-5"
      )}
    >
      <div
        className={cn(
          "[border-radius:inherit]",
          !i
            ? "aspect-[331/221] md:aspect-auto lg:aspect-[310/200]"
            : "aspect-[128/109] md:aspect-auto xl:aspect-[72/58]"
        )}
      >
        <AnimatePresence>
          {animationComplete ? (
            <motion.div
              className="size-full [border-radius:inherit] overflow-hidden will-change-transform aspect-[206/166]"
              layoutId={`blog-image-${i}`}
              transition={{ layout: { delay: 0.3 + i * 0.1, duration: 1, ease: "easeInOut" } }}
            >
              <Image
                src={`${process.env.NEXT_PUBLIC_MEDIA_URL}${image}`}
                alt={title}
                width={!i ? 1240 : 810}
                height={!i ? 808 : 660}
                className="size-full object-cover absolute"
                priority
              />
            </motion.div>
          ) : (
            <motion.div
              key={image}
              className="absolute rounded-[1.5rem] overflow-hidden w-[min(75%,40.625rem)] will-change-transform aspect-[206/166]"
              style={{ top: "5%", left: "50%" }}
              initial={{ x: "150%", y: "200%", scale: 0 }}
              animate={
                isInView
                  ? {
                      x: "-50%",
                      scale: 1,
                      y: position,
                      transition: { delay: 0.4 * i, duration: 0.5, ease: "easeInOut" },
                    }
                  : undefined
              }
              onAnimationComplete={() => {
                if (i === arr.length - 1 && isInView) {
                  setAnimationComplete(true);
                }
              }}
              layoutId={`blog-image-${i}`}
            >
              <Image
                src={`${process.env.NEXT_PUBLIC_MEDIA_URL}${image}`}
                alt={title}
                width={1200}
                height={800}
                className="size-full object-cover absolute"
                priority
              />
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      <motion.div
        animate={{
          opacity: animationComplete ? 1 : 0,
          y: animationComplete ? 0 : "5%",
          transition: { delay: 1 + i * 0.1 },
        }}
        className={cn(
          "flex flex-col justify-center",
          !i
            ? "p-4 md:px-[min(3.5vw,3.125rem)] gap-3 md:gap-5"
            : "py-3 pr-3 gap-2 md:gap-3.5 md:pr-[min(3.5vw,2.75rem)]"
        )}
      >
        <div className="flex justify-between font-medium flex-wrap gap-1">
          <span
            className={cn(
              "text-contigo-violeta",
              !i ? "text-[0.8125rem] md:text-base" : "text-[0.625rem] md:text-[0.875rem]"
            )}
          >
            {category}
          </span>
          <span className={cn(!i ? "text-[0.6875rem] md:text-[0.9375rem]" : "text-[0.5625rem] md:text-[0.8125rem]")}>
            {formatTimestampToSpanishDate(date).split(",")[1]}
          </span>
        </div>
        <h3
          className={cn(
            "font-medium",
            !i ? "text-lg md:text-[min(2.3vw,2.0625rem)]" : "text-[0.8125rem] md:text-[min(1.8vw,1.375rem)]"
          )}
        >
          {title}
        </h3>
        {!i && (
          <p
            dangerouslySetInnerHTML={{ __html: truncateHtmlPreservingTags(description, 20) }}
            className="text-[0.875rem] md:text-[min(1.6vw,1.125rem)]"
          />
        )}
        <NavigationLink
          path={`/blog/${slug}`}
          className={cn(
            "contigo-link-primary flex gap-1 items-center",
            !i ? "text-[0.875rem] md:text-[1.125rem]" : "text-[0.6875rem] md:text-[1.0313rem]"
          )}
        >
          Leer {!i ? "artículo" : "más"} <AnimatedArrow />
        </NavigationLink>
      </motion.div>
    </div>
  );
};

export default BlogCard;