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";
import backgroundRoadMap from "../../../assets/images/home-roadmap-road.png";
import boderItem from "../../../assets/images/bt-bg.png";
import dotOrange from "../../../assets/images/dot-orange.svg";

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 ? "translateX(0%)" : "translateX(-100%)",
    config: {
      duration: 700,
    },
  });

  return (
    <div
      className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20 w-[94%] "
      id="roadmap"
    >
      <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-8 relative">
        Road Map
      </h1>
      <animated.div
        style={{
          ...styles1,
        }}
      >
        <div className="flex flex-wrap justify-between sm:px-8 sm:grid sm:grid-cols-2  grid-flow-row  gap-5  max-tablet:h-full relative tablet:h-[716px] desktop:h-[895px]">
          <div
            className="image-container hidden  tablet:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]  tablet:w-[880px] tablet:h-[280px] bg-cover bg-no-repeat bg-center desktop:w-[1026px] desktop:h-[327px]"
            style={{
              backgroundImage: `url(${backgroundRoadMap})`,
              filter: "hue-rotate(183deg)",
            }}
          ></div>
          <div className=" tablet:absolute tablet:top-[360px] tablet:left-[0px] desktop:top-[460px] desktop:left-[00px]">
            <div
              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
              style={{
                backgroundImage: `url(${boderItem})`,
                filter: "hue-rotate(180deg)",
              }}
            >
              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
                {t("Q2-2023-Header")}
              </span>
            </div>
            <div className="flex flex-col gap-3">
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("Q2-2023-Title1")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("Q2-2023-Title2")}
                </span>
              </div>
            </div>
          </div>
          <div className="   tablet:absolute tablet:top-[20px] tablet:left-[60px] desktop:top-[100px] desktop:left-[100px]">
            <div
              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
              style={{
                backgroundImage: `url(${boderItem})`,
                filter: "hue-rotate(180deg)",
              }}
            >
              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
                {t("T7-2023-Header")}
              </span>
            </div>
            <div className="flex flex-col gap-3 max-w-[280px]">
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T7-2023-Title1")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T7-2023-Title2")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T7-2023-Title3")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T7-2023-Title4")}
                </span>
              </div>
            </div>
          </div>
          <div className="   tablet:absolute tablet:top-[530px] tablet:left-[100px] desktop:top-[620px] desktop:left-[140px] ">
            <div
              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
              style={{
                backgroundImage: `url(${boderItem})`,
                filter: "hue-rotate(180deg)",
              }}
            >
              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
                {t("T8-2023-Header")}
              </span>
            </div>
            <div className="flex flex-col gap-3">
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T8-2023-Title1")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T8-2023-Title2")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T8-2023-Title3")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T8-2023-Title4")}
                </span>
              </div>
            </div>
          </div>
          <div className="   tablet:absolute tablet:top-[340px] tablet:left-[340px] tablet1:left-[400px] desktop:top-[424px] desktop:left-[420px] ">
            <div
              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
              style={{
                backgroundImage: `url(${boderItem})`,
                filter: "hue-rotate(180deg)",
              }}
            >
              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
                {t("T9&10-2023-Header")}
              </span>
            </div>
            <div className="flex flex-col gap-3">
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T9&10-2023-Title1")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T9&10-2023-Title2")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T9&10-2023-Title3")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T9&10-2023-Title4")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T9&10-2023-Title5")}
                </span>
              </div>
            </div>
          </div>

          <div className="   tablet:absolute tablet:top-[20px] tablet:left-[362px] desktop:top-[80px] desktop:left-[500px] ">
            <div
              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
              style={{
                backgroundImage: `url(${boderItem})`,
                filter: "hue-rotate(180deg)",
              }}
            >
              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
                {t("T11-2023-Header")}
              </span>
            </div>
            <div className="flex flex-col gap-3 max-w-[280px] desktop:max-w-[350px]">
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T11-2023-Title1")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T11-2023-Title2")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T11-2023-Title3")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T11-2023-Title4")}
                </span>
              </div>
            </div>
          </div>

          <div className="   tablet:absolute tablet:bottom-[110px] tablet:right-[10px] desktop:right-[60px] desktop:bottom-[140px]  ">
            <div
              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
              style={{
                backgroundImage: `url(${boderItem})`,
                filter: "hue-rotate(180deg)",
              }}
            >
              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
                {t("T12-2023-Header")}
              </span>
            </div>
            <div className="flex flex-col gap-3 max-w-[280px]">
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T12-2023-Title1")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T12-2023-Title2")}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T12-2023-Title3")}
                </span>
              </div>
            </div>
          </div>

          <div className="   tablet:absolute tablet:top-[80px] tablet:right-[0px] desktop:right-[20px] desktop:top-[160px]">
            <div
              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
              style={{
                backgroundImage: `url(${boderItem})`,
                filter: "hue-rotate(180deg)",
              }}
            >
              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
                {t("T1-2024-Header")}
              </span>
            </div>
            <div className="flex flex-col gap-3 max-w-[280px]">
              <div className="flex items-center gap-2">
                <img
                  className="w-[14px] h-[12px]"
                  src={dotOrange}
                  style={{ filter: "hue-rotate(180deg)" }}
                  alt=""
                />
                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
                  {t("T1-2024-Title1")}
                </span>
              </div>
            </div>
          </div>
        </div>
      </animated.div>
      {/* <animated.div
        id="timeline"
        style={{ ...styles }}
        className="w-full flex flex-col gap-y-4 lg:flex-row"
      >
        {roadMapData.map((item: any, index: any) => {
          return (
            <div
              key={index}
              className="tl-item w-[80%]mx-auto lg:hover:w-[150%!important] "
            >
              <div
                className="tl-bg"
                style={{
                  backgroundImage: `url("https://picsum.photos/200/300")`,
                }}
              ></div>
              <h4 className="tl-title">{item.phase}</h4>
              <ol className="tl-content w-[90%] md:w-[60%] lg:w-[90%] mx-auto 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>
  );
};

export default RoadMap;
