"use client";

import React, { useEffect, useState } from "react";
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component";
import { AnimatePresence, motion } from "framer-motion";

import "react-vertical-timeline-component/style.min.css";

import { SectionWrapper } from "src/hoc";
import { textVariant } from "src/utils/motion";
import { styles } from "src/style";
import { activityFake, activityFakeFa } from "datacalender";
import ActivityCardFake from "@comp/TaskPage/ActivityCardFake/page";
import { useLocale, useTranslations } from "next-intl";

const experiences = () => {
  const t = useTranslations("experiences");
  return [
    {
      title: t("insertTasks.title"),
      points: t("insertTasks.points"),
    },
    {
      title: t("createShiftPlan.title"),
      points: t("createShiftPlan.points"),
    },
    {
      title: t("specificPerson.title"),
      points: t("specificPerson.points"),
    },
    {
      title: t("realTime.title"),
      points: t("realTime.points"),
    },
    {
      title: t("confirmsCompletion.title"),
      points: t("confirmsCompletion.points"),
    },
  ];
};

const ExperienceCard = ({ experience }) => {
  console.log(experience);
  const [isMobile, setIsMobile] = useState(false);
  const locale = useLocale();
  const isRTL = locale === "fa";

  useEffect(() => {
    // Check window size after the component mounts
    const handleResize = () => {
      setIsMobile(window.innerWidth < 640);
    };

    // Run the function initially and also when the window is resized
    handleResize();
    window.addEventListener("resize", handleResize);

    // Clean up event listener on unmount
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return (
    <VerticalTimelineElement
      contentStyle={{
        background: "#35685952",
        color: "#fff",
        borderRadius: "15px",
      }}
      contentArrowStyle={{ borderRight: "7px solid  #35685952" }}
      iconStyle={{
        color: "#fff", // Customize icon color
        boxShadow: "0 0 0 4px #35685952", // Add shadow or border
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        background: "white",
        width: "30px",
        height: "30px",
        marginLeft: isMobile ? "5px" : "-15px", // Apply margin based on screen width
        marginTop: "15px",
        opacity: "0.8",
      }}
    >
      <div>
        <h3
          className={`text-white text-[24px] font-bold rtl ${
            isRTL ? "rtl" : "ltr"
          }`}
        >
          {experience.title}
        </h3>
      </div>

      <ul className={`mt-5 list-disc ml-5 space-y-2 ${isRTL ? "rtl" : "ltr"}`}>
        <li className="text-white-100 text-[14px] pl-1 tracking-wider">
          {experience.points}
        </li>
      </ul>
    </VerticalTimelineElement>
  );
};

const Experience = () => {
  const t = useTranslations("experiences");

  const locale = useLocale();
  const isRTL = locale === "fa";

  const [number, setNumber] = useState(4521);
  const [prevNumber, setPrevNumber] = useState(4521);

  useEffect(() => {
    const interval = setInterval(() => {
      setPrevNumber(number);
      setNumber((prev) => prev + 1);
    }, 15000);

    return () => clearInterval(interval);
  }, [number]);

  const numberStr = number.toString();
  const prevNumberStr = prevNumber.toString();

  const fadeVariants = {
    initial: { opacity: 0, y: 30, color: "#000000" }, // Dark background when fading in
    animate: { opacity: 1, y: 0, color: "#ffffff" }, // White background when fully visible
    exit: { opacity: 0, y: -30, color: "#000000" }, // Dark background when fading out
  };
  return (
    <>
      <motion.div variants={textVariant()}>
        {isRTL ? (
          <h2 className="text-white font-black text-[30px] xs:text-[40px] sm:text-[50px] md:text-[60px] xs:leading-[50px] text-center	">
            {t("title")}
          </h2>
        ) : (
          <h2 className="text-white font-black text-[30px] xs:text-[40px] sm:text-[50px] md:text-[60px] xs:leading-[50px] text-center	">
            <span className="text-primary-300 text-[30px] xs:text-[100px] sm:text-[150px] relative top-[5px] sm:top-[10px] font-bold">
              B
            </span>
            ase logics{" "}
          </h2>
        )}
      </motion.div>

      <div className="mt-20 flex flex-col ">
        <VerticalTimeline>
          {experiences().map((e, index) => (
            <ExperienceCard key={`experience-${index}`} experience={e} />
          ))}
        </VerticalTimeline>
      </div>

      <div className=" mt-20">
        <h2
          className={`text-white font-bold  md:text-[30px] sm:text-[20px] xs:text-[18px] text-[30px] text-center`}
        >
          {t("taskText")}{" "}
        </h2>
        <div className="xs:block lg:flex  justify-center mt-10">
          <div className="lg:w-[400px]">
            <ActivityCardFake
              data={isRTL ? activityFakeFa : activityFake}
              type={isRTL ? "fa" : "en"}
            />
          </div>
          <div className="ml-4 mt-7">
            <div className="flex xs:justify-center xs:mt-10 lg:mt-0">
              {numberStr.split("").map((digit, index) => (
                <div key={index} className="relative text-4xl h-12 w-11 ">
                  <AnimatePresence initial={false}>
                    {prevNumberStr[index] !== digit && (
                      <motion.span
                        key={`${prevNumberStr[index]}-prev`}
                        className="absolute inset-x-0 text-center text-white !text-[80px] font-bold "
                        initial="animate"
                        animate="exit"
                        exit="initial"
                        variants={fadeVariants}
                        transition={{ duration: 0.5 }}
                      >
                        {prevNumberStr[index]}
                      </motion.span>
                    )}
                  </AnimatePresence>
                  <AnimatePresence initial={false}>
                    <motion.span
                      key={`${digit}-current`}
                      className="absolute inset-x-0 text-center text-white !text-[80px] font-bold"
                      initial="initial"
                      animate="animate"
                      exit="exit"
                      variants={fadeVariants}
                      transition={{ duration: 0.5 }}
                    >
                      {digit}
                    </motion.span>
                  </AnimatePresence>
                </div>
              ))}
            </div>
            <p className="mb-0 text-white font-light text-center">
              {t("LiveNumberTask")}{" "}
            </p>
          </div>
        </div>
      </div>
    </>
  );
};

export default SectionWrapper(Experience, "our-solution");