import { useState, useEffect, useRef, useContext } from "react";
import { motion } from "framer-motion";
import Heading from "../Heading";
import RightArrow from "../../assets/buttons/RightArrow.svg";
import LeftArrow from "../../assets/buttons/LeftArrow.svg";
import styles from "./Activity.module.css";
import { LoadingContext } from "../utils/LoadingContext";

const Activity = ({ isVisible, activityData }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [direction, setDirection] = useState(1);
  const intervalRef = useRef(null); // Store interval reference
  const { isLoading } = useContext(LoadingContext); // Use the global loading state

  const resetTimer = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setDirection(1);
      setCurrentIndex((prevIndex) => (prevIndex + 1) % activityData.length);
    }, 6000);
  };

  useEffect(() => {
    if (activityData.length === 0) return;

    resetTimer(); // Start the interval when data loads

    return () => clearInterval(intervalRef.current); // Cleanup on unmount
  }, [activityData]);

  const nextCommit = () => {
    setDirection(1);
    setCurrentIndex((prevIndex) => (prevIndex + 1) % activityData.length);
    resetTimer(); // Restart the timer
  };

  const prevCommit = () => {
    setDirection(-1);
    setCurrentIndex((prevIndex) =>
      prevIndex === 0 ? activityData.length - 1 : prevIndex - 1
    );
    resetTimer(); // Restart the timer
  };

  if (isLoading) return <div>Loading...</div>; // Use global loading state
  if (!activityData.length) return <div>No recent activity found</div>;

  return (
    <motion.div
      id="activity"
      className="min-h-[60vh] pt-2 sm:pt-10"
      initial={{ opacity: 0, y: 100 }}
      animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: 100 }}
      transition={{ duration: 0.2, ease: "easeOut" }}
    >
      <div className={styles["activity-container"]}>
        <Heading title="Development Activity" />
        {/* Content Wrapper */}
        <div className="flex flex-col items-center justify-center min-h-[300px] w-full">
          <div className={styles["activity-card"]}>
            <motion.div
              key={currentIndex}
              initial={{ x: direction * 100, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              exit={{ x: -direction * 100, opacity: 0 }}
              transition={{ duration: 0.5 }}
              className={styles["activity-content"]}
            >
              <img
                src={activityData[currentIndex]?.logoUrl || "default-logo-url"}
                alt="GitBucket Logo"
                className={styles["activity-logo"]}
              />
              <div>
                <h3 className={styles["activity-title"]}>
                  {activityData[currentIndex]?.name || "No Title"}
                </h3>
                <p className={styles["activity-details"]}>
                  Author: {activityData[currentIndex]?.author} -{" "}
                  {new Date(activityData[currentIndex]?.date).toLocaleString()}
                </p>
              </div>
            </motion.div>

            <a
              href={activityData[currentIndex]?.url}
              className={styles["activity-link"]}
              target="_blank"
              rel="noopener noreferrer"
            >
              View Commit
            </a>
          </div>

          {/* Buttons */}
          <div className={styles["activity-buttons"]}>
            <button onClick={prevCommit} className={styles["activity-button"]}>
              <img src={LeftArrow} alt="Previous" />
            </button>

            <button onClick={nextCommit} className={styles["activity-button"]}>
              <img src={RightArrow} alt="Next" />
            </button>
          </div>
        </div>
      </div>
    </motion.div>
  );
};

export default Activity;