import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export enum HomeSlide {
  Hero = "hero",
  AboutUs = "about-us",
  OurServices = "our-services",
  Careers = "careers",
  Newsroom = "newsroom",
}

export const homeSlides = [
  { id: HomeSlide.Hero },
  { id: HomeSlide.AboutUs },
  { id: HomeSlide.OurServices },
  { id: HomeSlide.Careers },
  { id: HomeSlide.Newsroom },
];

const SlideSwitcher = ({ variant = "dark" }: any) => {
  const [selectedSlideId, setSelectedSlideId] = useState(HomeSlide.Hero);

  const router = useRouter();

  useEffect(() => {
    const elements: any = homeSlides.map((silde) => document.getElementById(silde.id));

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setSelectedSlideId(entry.target.id as HomeSlide);
          }
        });
      },
      {
        threshold: 0.2,
      }
    );

    elements.forEach((element: any) => {
      observer.observe(element);
    });
  }, []);

  return (
    <div className="flex flex-col gap-4 absolute top-[50%] transform translate-y-[-50%] rtl:lg:right-[calc(var(--container-padding)-3rem)] ltr:lg:left-[calc(var(--container-padding)-3rem)] z-[2]">
      {homeSlides.map(({ id }, index) => (
        <div key={index}>
          <button onClick={() => router.push(`/home#${id}`)}>
            {selectedSlideId === id && (
              <div className="bg-color-2 w-5 h-5 rounded-full border-white border"></div>
            )}
            {selectedSlideId !== id && (
              <div className="bg-color-2 w-5 h-5 rounded-full opacity-[30%] border-white border"></div>
            )}
          </button>
        </div>
      ))}
    </div>
  );
};

export default SlideSwitcher;