"use client";
import { GUIDE_STEPS, GUIDE_STEPS_ITEMS_DATA_ITEM } from "@/src/types/StaticContent/home.content.type";
import Routes from "@/src/utils/RouteConstants";
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import { useInView } from "react-intersection-observer";
import styles from './GuideSteps.module.scss';

interface StepItemsDataProps {
  GuideStepsData: GUIDE_STEPS
}

const GuideSteps: React.FC<StepItemsDataProps> = ({ GuideStepsData }) => {
  const { ref, inView } = useInView({
    threshold: 0.3,
    triggerOnce: false,
  });

  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    let intervalId: NodeJS.Timeout;

    if (inView) {
      // Run once immediately
      setIsVisible(true);

      intervalId = setInterval(() => {
        // Trigger toggle to restart animation
        setIsVisible(false);
        setTimeout(() => {
          setIsVisible(true);
        }, 50); // short delay to reset animation classes
      }, 5000); // repeat every 5 seconds (you can change it)
    } else {
      setIsVisible(false);
    }

    return () => clearInterval(intervalId);
  }, [inView]);

  return (
    <section
      ref={ref}
      className={`${styles.GuideStepsWrapper} bg-secondaryColor py-[30px] sm:py-[40px] md:py-[50px] xl:py-[60px] xxxl:py-[70px]`}
    >
      <div className="container">
        <div className="text-center m-auto max-w-[750px] xl:max-w-[850px] xxl:max-w-[950px]">
          <h2 className="mb-2.5 sm:mb-3.5 text-whiteColor">{GuideStepsData.TITLE}</h2>
          <Link className="WhiteBorderedBtn lg:!h-[60px] w-max m-auto" href={Routes.LIST_A_HOME}>
            {GuideStepsData?.START_BECOME_A_HOST}{' '}
            <i className="Icon IconRightArrow !bg-whiteColor w-[25px] h-[19px]"></i>
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-5 md:gap-6 xxl:gap-8 mt-5 sm:mt-7 lg:mt-9 xl:mt-16 xxxl:mt-18">
          {GuideStepsData?.STEP_ITEMS_DATA?.map((stepItem: GUIDE_STEPS_ITEMS_DATA_ITEM, stepKey: number) => {
            const delayClass = styles[`delay-${stepKey + 1}`];
            const animateClass = isVisible ? styles.animate : '';

            return (
              <div
                key={stepKey}
                className={`${styles.StepItemWrap} relative before:w-[54px] before:h-[54px] before:md:w-[64px] before:md:h-[64px] before:bg-primaryColor before:rounded-full before:inline-flex before:justify-center before:items-center`}
              >
                <div className={`${styles.StepItemContent} relative z-0 h-full p-5 pb-14`}>
                  <div className="pl-15 sm:pl-17 md:pl-19 xxl:pl-18 mb-[20px] sm:mb-[25px]">
                    <h3 className="h5 lg:max-w-[355px] xl:max-w-[220px] xxl:max-w-[310px] xxxl:max-w-full">{stepItem.STEP_TITLE}</h3>
                    <span className={`flex h-[11px] ${styles.ProgressLine} overflow-hidden block w-full`}>
                      <span className={`${styles.FirstLine} h-[11px] ${animateClass} ${delayClass}`}></span>
                      <span className={`${styles.LastLine} h-[11px] ${animateClass} ${delayClass}`}></span>
                    </span>
                  </div>
                  <p className="fs-16 text-grey475Color">
                    {stepItem.STEP_DESCRIPTION}
                  </p>
                </div>

                <span
                  className={`absolute z-[1] right-0 bottom-0 h-[30px] inline-flex items-center justify-center 
                    border-1 border-primaryColor bg-primaryColor hover:bg-secondaryColor 
                    rounded-full transition-all duration-500
                    ${styles.AnimatedArrow} 
                    ${animateClass} 
                    ${delayClass}`}
                >
                  <i className="Icon IconRightArrow !bg-whiteColor w-[20px] h-[19px]"></i>
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default GuideSteps;