import { useState, useEffect , useCallback, useRef} from 'react'
import { Progress } from "@/components/shadcn/ui/progress"

const ProgressBar = () =>{
  const [progressbar, setProgressbar] = useState(0);
  const progressRef = useRef(null);
  const requestRef = useRef(null);

  const handleScroll = useCallback(() => {
    if (requestRef.current) return;

    requestRef.current = requestAnimationFrame(() => {
      const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

      if (scrollTop === 0) {
        setProgressbar(0);
        requestRef.current = null;
        return;
      }

      const windowHeight = scrollHeight - clientHeight;
      const currentPercent = (scrollTop / windowHeight);
      setProgressbar(currentPercent * 100);

      requestRef.current = null;
    });
  }, []);
  
    useEffect(() => {
      window.addEventListener('scroll', handleScroll, true);
  
      return () => {
        window.removeEventListener('scroll', handleScroll, true);

        if (requestRef.current) {
          cancelAnimationFrame(requestRef.current);
        }
      };
    }, [handleScroll]);

    return(
      <Progress ref={progressRef} className='[&>*]:bg-[#a4c6ff] fixed top-[0] left-[0] h-[4px] bg-transparent' value={progressbar} />
    )
}

export default ProgressBar