import { AnimatePresence, motion, useInView } from "framer-motion";
import React, { ReactElement, useEffect, useMemo, useState, useRef } from "react";


export const ArticleList = React.memo(
  ({
    className,
    children,
    delay = 1000,
  }: {
    className?: string;
    children: React.ReactNode;
    delay?: number;
  }) => {
    const [index, setIndex] = useState(0);

    const childrenArray = React.Children.toArray(children);

    const ref = useRef(null);
    const inView = useInView(ref);

    useEffect(() => {
      if (inView) {
        const interval = setInterval(() => {
          setIndex((prevIndex) => {
            if (prevIndex >= childrenArray.length - 1) {
              clearInterval(interval); // Stop the interval when the last item is reached
              return prevIndex;
            }
            return prevIndex + 1;
          });
        }, delay);

        return () => clearInterval(interval);
      }
    }, [childrenArray.length, delay, inView]);

    const itemsToShow = useMemo(
      () => childrenArray.slice(0, index + 1).reverse(),
      [index, childrenArray],
    );

    return (
      <div className={`flex flex-col items-center gap-4 ${className}`} ref={ref}>
        <AnimatePresence>
          {itemsToShow.map((item) => (
            <ArticleListItem key={(item as ReactElement).key}>{item}</ArticleListItem>
          ))}
        </AnimatePresence>
      </div>
    );
  },
);

// translate: none; rotate: none; scale: none; opacity: 1; visibility: inherit; transform: translate(0px, 0px);

export function ArticleListItem({ children }: { children: React.ReactNode }) {
  const animations = {
    initial: { scale: 0, opacity: 0 },
    whileInView: { opacity: 1 },
    viewport: { once: true, amount: 0.5 },
    animate: { scale: 1, opacity: 1, originY: 0 },
    exit: { scale: 0, opacity: 0 },
    transition: { type: "spring", stiffness: 350, damping: 40 },
  };
  return (
    <motion.div {...animations} layout className="mx-auto">
      {children}
    </motion.div>
  );
}

export const AnimatedList = React.memo(
  ({
    className,
    children,
    delay = 1000,
  }: {
    className?: string;
    children: React.ReactNode;
    delay?: number;
  }) => {
    const [index, setIndex] = useState(0);

    const childrenArray = React.Children.toArray(children);

    const ref = useRef(null);
    const inView = useInView(ref);

    useEffect(() => {
      if (inView) {
        const interval = setInterval(() => {
          setIndex((prevIndex) => {
            if (prevIndex >= childrenArray.length - 1) {
              clearInterval(interval); // Stop the interval when the last item is reached
              return prevIndex;
            }
            return prevIndex + 1;
          });
        }, delay);

        return () => clearInterval(interval);
      }
    }, [childrenArray.length, delay, inView]);

    const itemsToShow = useMemo(
      () => childrenArray.slice(0, index + 1).reverse(),
      [index, childrenArray],
    );

    return (
      <div className={`flex flex-col items-center gap-4 ${className}`} ref={ref}>
        <AnimatePresence>
          {itemsToShow.map((item) => (
            <AnimatedListItem key={(item as ReactElement).key}>{item}</AnimatedListItem>
          ))}
        </AnimatePresence>
      </div>
    );
  },
);

AnimatedList.displayName = "AnimatedList";

export function AnimatedListItem({ children }: { children: React.ReactNode }) {
  const animations = {
    initial: { scale: 0, opacity: 0 },
    whileInView: { opacity: 1 },
    viewport: { once: true, amount: 0.5 },
    animate: { scale: 1, opacity: 1, originY: 0 },
    exit: { scale: 0, opacity: 0 },
    transition: { type: "spring", stiffness: 350, damping: 40 },
  };
  return (
    <motion.div {...animations} layout className="mx-auto">
      {children}
    </motion.div>
  );
}