import { useSpring, animated } from "@react-spring/web";
import React, { useEffect, useRef, useState } from "react";
import { VscDebugBreakpointLog } from "react-icons/vsc";
import { useTranslation } from "react-i18next";
import "../css/Roadmap.css";
type Props = {};

const RoadMap = (props: Props) => {
  const [isVisible, setIsVisible] = useState(false);
  const { t } = useTranslation("roadmapHome");
  const [roadMapData, setRoadmapData] = useState([]);

  useEffect(() => {
    setRoadmapData(t("array", { returnObjects: true }));
    const section = document.getElementById("roadmap");
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.1 }
    );

    if (!section) {
      return;
    }
    observer.observe(section);

    return () => {
      observer.unobserve(section);
    };
  }, [t]);

  useEffect(() => {
    console.log("isVisible", isVisible);
  }, [isVisible]);

  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "scaleX(1)" : "scaleX(0)",
    config: {
      duration: 500,
    },
  });
  const styles1 = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "scaleY(1)" : "scaleY(0)",
    config: {
      duration: 500,
    },
  });

  return (
    <div
      className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20"
      id="roadmap"
    >
      <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20 relative">
        Road Map
      </h1>
      {/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */}
      <animated.div
        id="timeline"
        style={{ ...styles }}
        className="w-full flex flex-col gap-y-4 md:flex-row"
      >
        {/* <animated.div
          style={{ ...styles1 }}
          className="absolute rounded-lg left-[50%] translate-x-[50%] w-2 h-[100%] bg-gradient-to-b from-violet-500 to-fuchsia-500"
        ></animated.div> */}
        {roadMapData.map((item: any, index: any) => {
          return (
            <div key={index} className="tl-item md:hover:w-[35%!important] ">
              <div
                className="tl-bg"
                style={{
                  backgroundImage: `url("https://placeimg.com/802/802/nature")`,
                }}
              ></div>
              <h4 className="tl-title">{item.phase}</h4>
              <ol className="tl-content flex flex-col gap-y-[12px]">
                {item.listTitle.map((listItem: any, index: any) => {
                  return (
                    <li key={index} className="flex items-center gap-x-[20px]">
                      <VscDebugBreakpointLog
                        style={{
                          color: "#B051F2",
                        }}
                      />
                      <p>{listItem}</p>
                    </li>
                  );
                })}
              </ol>
            </div>
          );
        })}
      </animated.div>
    </div>
    // </div>
  );
};

export default RoadMap;