import { isMobileDevice } from "@/components/ConnectModal/utils/device";
import { useEffect, useRef, useState } from "react";

/**
 * to fix the hover effect not disappear after click on mobile
 */
const useHover: () => [React.RefObject<HTMLDivElement>, boolean] = () => {
  const [isHover, setIsHover] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const node = ref.current;
    if (node) {
      const handleMouseEnter = () => {
        setIsHover(true);
      };
      const handleMouseLeave = () => {
        setIsHover(false);
      };
      const isMobile = isMobileDevice();

      !isMobile && node.addEventListener("mouseenter", handleMouseEnter);
      !isMobile && node.addEventListener("mouseleave", handleMouseLeave);
      isMobile && node.addEventListener("touchstart", handleMouseEnter);
      isMobile && node.addEventListener("touchend", handleMouseLeave);

      return () => {
        !isMobile && node.removeEventListener("mouseenter", handleMouseEnter);
        !isMobile && node.removeEventListener("mouseleave", handleMouseLeave);
        isMobile && node.removeEventListener("touchstart", handleMouseEnter);
        isMobile && node.removeEventListener("touchend", handleMouseLeave);
      };
    }
  }, []);
  return [ref, isHover];
};

export default useHover;