import { useState, useEffect, useRef } from 'react';

export const useScrollDirection = () => {
  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('up');
  const [isVisible, setIsVisible] = useState(true);
  const [translateY, setTranslateY] = useState(0);
  const [isScrollingState, setIsScrollingState] = useState(false);
  
  const lastScrollY = useRef(0);
  const scrollAccumulator = useRef(0);
  const isScrolling = useRef(false);
  const scrollTimeout = useRef<NodeJS.Timeout | null>(null);
  const lastScrollDirection = useRef<'up' | 'down'>('up');

  useEffect(() => {
    let ticking = false;

    const updateScrollDirection = () => {
      const scrollY = window.scrollY;
      const scrollDiff = scrollY - lastScrollY.current;
      
      // 스크롤 차이가 너무 작으면 무시
      if (Math.abs(scrollDiff) < 2) {
        ticking = false;
        return;
      }

      isScrolling.current = true;
      setIsScrollingState(true);
      
      // 스크롤 방향 설정 및 마지막 방향 저장
      if (scrollDiff > 0) {
        setScrollDirection('down');
        lastScrollDirection.current = 'down';
      } else {
        setScrollDirection('up');
        lastScrollDirection.current = 'up';
      }

      // 스크롤 누적량 계산 (최대 100px까지) - 부드러운 보간
      const dampingFactor = 0.8; // 댐핑 팩터로 부드러운 움직임
      scrollAccumulator.current += scrollDiff * dampingFactor;
      scrollAccumulator.current = Math.max(-100, Math.min(100, scrollAccumulator.current));

      // 드래그 중에는 스크롤 누적량에 비례하여 탭바 위치 조정
      let newTranslateY = 0;
      if (scrollAccumulator.current > 0) {
        // 아래로 스크롤: 0 ~ 100px 사이에서 부드럽게 조정
        newTranslateY = Math.min(100, scrollAccumulator.current);
      } else {
        // 위로 스크롤: 0px 고정하고 누적량도 0으로 리셋
        newTranslateY = 0;
        scrollAccumulator.current = Math.max(0, scrollAccumulator.current);
      }
      
      // 부드러운 업데이트를 위한 RAF 사용
      requestAnimationFrame(() => {
        setTranslateY(newTranslateY);
      });

      lastScrollY.current = scrollY > 0 ? scrollY : 0;

      // 스크롤 종료 감지
      if (scrollTimeout.current) {
        clearTimeout(scrollTimeout.current);
      }
      
      scrollTimeout.current = setTimeout(() => {
        isScrolling.current = false;
        setIsScrollingState(false);
        
        // 스크롤 종료 시 마지막 드래그 방향에 따라 최종 위치 결정
        if (Math.abs(scrollAccumulator.current) > 15) {
          // 충분한 스크롤이 있었을 때만 방향에 따라 결정
          if (lastScrollDirection.current === 'down') {
            // 아래로 스크롤했으면 탭바 숨기기
            setTranslateY(100);
            setIsVisible(false);
            scrollAccumulator.current = 100;
          } else {
            // 위로 스크롤했으면 탭바 보이기
            setTranslateY(0);
            setIsVisible(true);
            scrollAccumulator.current = 0;
          }
        } else {
          // 스크롤이 미미할 때는 현재 상태 유지
          if (isVisible) {
            setTranslateY(0);
            scrollAccumulator.current = 0;
          } else {
            setTranslateY(100);
            scrollAccumulator.current = 100;
          }
        }
      }, 150);

      ticking = false;
    };

    const onScroll = () => {
      if (!ticking) {
        requestAnimationFrame(updateScrollDirection);
        ticking = true;
      }
    };

    window.addEventListener('scroll', onScroll, { passive: true });

    return () => {
      window.removeEventListener('scroll', onScroll);
      if (scrollTimeout.current) {
        clearTimeout(scrollTimeout.current);
      }
    };
  }, [isVisible]);

  return { scrollDirection, isVisible, translateY, isScrollingState };
}; 