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 HiringSolutionTimeline = ({ setObserver, callback }:any) => {
  const [message1, setMessage1] = useState<TimelineMessage>();
  const [message2, setMessage2] = useState<TimelineMessage>();
  const [message3, setMessage3] = useState<TimelineMessage>();
  const [message4, setMessage4] = useState<TimelineMessage>();

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

  const someCallback = () => {
    setMessage1({
        heading:"Login To Portal",
        paragraph:"Unlock your gateway to exceptional talent. Log in to our portal and discover the perfect employee who seamlessly fits your job role."
    });
    callback();
  };

  const someCallback2 = () => {
    setMessage2({
        heading:"Post Job",
        paragraph:"Companies and Institutions effortlessly post job opportunities to find the right talent"
    });
  };

  const someCallback3 = () => {
    setMessage3({
        heading:"Get shortlisted candidate by AI",
        paragraph:"Experience seamless recruitment powered by AI, ensuring you get shortlisted candidates tailored to your needs."
    });
  };
  
  const someCallback4 = () => {
    setMessage4({
        heading:"Hire best resources",
        paragraph:"Secure top-tier talent for your team by hiring the best resources available. Elevate your workforce and drive success with unparalleled expertise and skills."
    });
  };

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

  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>
  );
};

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

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