import React, { useEffect, useRef, useState } from "react";
import { Fade } from "react-awesome-reveal";
import TimelineObserver from "react-timeline-animation";


interface TimelineMessage{
    heading: string;
    paragraph: string
}
const HowItWorksTimeline = ({ setObserver, callback }:any) => {
  const [message1, setMessage1] = useState<TimelineMessage>();
  const [message2, setMessage2] = useState<TimelineMessage>();
  const [message3, setMessage3] = useState<TimelineMessage>();
  const [message4, setMessage4] = useState<TimelineMessage>();
  const [message5, setMessage5] = useState<TimelineMessage>();

  const timeline1 = useRef(null);
  const timeline2 = useRef(null);
  const timeline3 = useRef(null);
  const timeline4 = useRef(null);
  const circle1 = useRef(null);
  const circle2 = useRef(null);
  const circle3 = useRef(null);
  const circle4 = useRef(null);
  const circle5 = useRef(null);

  const someCallback = () => {
    setMessage1({
        heading:"Create Profile:",
        paragraph:"Sign up and create a detailed profile that showcases your professional journey, skills, and aspirations."
    });
    callback();
  };

  const someCallback2 = () => {
    setMessage2({
        heading:"Upload CV:",
        paragraph:"Share your CV effortlessly to provide a comprehensive overview of your qualifications and experiences."
    });
  };

  const someCallback3 = () => {
    setMessage3({
        heading:"Psychometric Test:",
        paragraph:"Engage in our insightful psychometric assessments to uncover valuable insights about your personality and work preferences."
    });
  };
  
  const someCallback4 = () => {
    setMessage4({
        heading:"Discover Ideal Job:",
        paragraph:"its magic! Receive personalized job recommendations based on your CV, test results, and preferences."
    });
  };
  
  const someCallback5 = () => {
    setMessage5({
        heading:"Apply with Confidence:",
        paragraph:"Apply to jobs that resonate with your career goals, armed with the knowledge that your skills and personality traits align with the job requirements."
    });
  };

  useEffect(() => {
    setObserver(timeline1.current);
    setObserver(timeline2.current);
    setObserver(timeline3.current);
    setObserver(timeline4.current);
    setObserver(circle1.current, someCallback);
    setObserver(circle2.current, someCallback2);
    setObserver(circle3.current, someCallback3);
    setObserver(circle4.current, someCallback4);
    setObserver(circle5.current, someCallback5);
  }, []);

  return (
    <div className="wrapper">
      <div className="circleWrapper">
        <div id="circle1" ref={circle1} className="circle">
          1
        </div>
        <div className="message text-white">
          <Fade>
            <h2 className="text-white">{message1?.heading}</h2>
            <p className="text-white mt-2">{message1?.paragraph}</p>
          </Fade>
        </div>
      </div>
      <div id="timeline1" ref={timeline1} className="timeline" />
      <div className="circleWrapper">
        <div id="circle2" ref={circle2} className="circle">
          2
        </div>
        <div className="message text-white">
          <Fade>
            <h2 className="text-white">{message2?.heading}</h2>
            <p className="text-white mt-2">{message2?.paragraph}</p>
          </Fade>
        </div>
      </div>
      <div id="timeline2" ref={timeline2} className="timeline" />
      <div className="circleWrapper">
        <div id="circle3" ref={circle3} className="circle">
          3
        </div>
        <div className="message text-white">
          <Fade>
            <h2 className="text-white">{message3?.heading}</h2>
            <p className="text-white mt-2">{message3?.paragraph}</p>
          </Fade>
        </div>
      </div>
      <div id="timeline3" ref={timeline3} className="timeline" />
      <div className="circleWrapper">
        <div id="circle4" ref={circle4} className="circle">
          4
        </div>
        <div className="message text-white">
          <Fade>
            <h2 className="text-white">{message4?.heading}</h2>
            <p className="text-white mt-2">{message4?.paragraph}</p>
          </Fade>
        </div>
      </div>
      <div id="timeline4" ref={timeline4} className="timeline" />
      <div className="circleWrapper">
        <div id="circle5" ref={circle5} className="circle">
          5
        </div>
        <div className="message text-white">
          <Fade>
            <h2 className="text-white">{message5?.heading}</h2>
            <p className="text-white mt-2">{message5?.paragraph}</p>
          </Fade>
        </div>
      </div>
    </div>
  );
};

export default function HowItWorks() {
  const onCallback = () => {
    console.log("awesome");
  };

  return (
    <>
      <TimelineObserver
        initialColor="#FFF"
        fillColor="#3FE0D0"
        handleObserve={(setObserver) => (
          <HowItWorksTimeline
            callback={onCallback}
            className="timeline"
            setObserver={setObserver}
          />
        )}
      />
    </>
  );
}