import React from "react";
import { navigation } from "../../constants/index";
import useIsMobile from "../../constants/useIsMobile";

const NavigationDots = ({ currentSectionId }) => {
  const smoothScroll = (target, duration = 75) => {
    const header = document.querySelector(".header");
    const headerHeight = header ? header.offsetHeight : 0;

    const targetPosition =
      target.getBoundingClientRect().top + window.scrollY - headerHeight;
    const startPosition = window.scrollY;
    const distance = targetPosition - startPosition;
    let startTime = null;

    const easeInOutQuad = (t, b, c, d) => {
      t /= d / 2;
      if (t < 1) return (c / 2) * t * t + b;
      t--;
      return (-c / 2) * (t * (t - 2) - 1) + b;
    };

    const animateScroll = (currentTime) => {
      if (startTime === null) startTime = currentTime;
      const timeElapsed = currentTime - startTime;
      const run = easeInOutQuad(timeElapsed, startPosition, distance, duration);

      window.scrollTo(0, run);

      if (timeElapsed < duration) {
        requestAnimationFrame(animateScroll);
      } else {
        window.scrollTo(0, targetPosition);
      }
    };

    requestAnimationFrame(animateScroll);
  };

  const handleDotClick = (sectionId) => {
    const section = document.getElementById(sectionId);
    if (section) {
      smoothScroll(section);
    }
  };

  const isMobile = useIsMobile();

  return (
    <div className="absolute left-8 top-1/2 transform -translate-y-1/2 flex flex-col space-y-4 z-50">
      {!isMobile &&
        navigation.map((item, index) => {
          const sectionId = item.url.replace("/#", "");
          return (
            <button
              key={item.id}
              onClick={() => handleDotClick(sectionId)}
              className={`w-3 h-3 rounded-full transition-colors duration-300 ${
                currentSectionId === sectionId
                  ? "bg-orange-500"
                  : "bg-gray-500 hover:bg-orange-400"
              }`}
            />
          );
        })}
    </div>
  );
};

export default NavigationDots;