import {
  Ref,
  useEffect, useRef, useState,
} from "atomico";

export function useHoverHook() {
  const [value, setValue] = useState(false);
  const ref: Ref<HTMLInputElement> = useRef(null);

  const handleMouseOver = (): void => {
    setValue(true);
  };
  const handleMouseOut = (): void => {
    setValue(false);
  };

  useEffect(
    // eslint-disable-next-line consistent-return
    () => {
      const node = ref.current;
      if (node) {
        node.addEventListener("mouseenter", handleMouseOver);
        node.addEventListener("mouseleave", handleMouseOut);

        return () => {
          node.removeEventListener("mouseenter", handleMouseOver);
          node.removeEventListener("mouseleave", handleMouseOut);
        };
      }
    },
    [ref.current], // Recall only if ref changes
  );

  return [ref, value];
}
