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

import { SHOW_CONTROLS_MS_DURATION } from '../../constants';

const useShowControls = () => {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const [showControls, setShowControls] = useState(false);

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  const handleMouseMove = () => {
    setShowControls(true);

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = setTimeout(() => {
      setShowControls(false);
      timeoutRef.current = null;
    }, SHOW_CONTROLS_MS_DURATION);
  };

  return { handleMouseMove, showControls };
};

export default useShowControls;
