import { useRef } from "react";
import { isBrowser } from "@reins/utils";

import { useDidUpdate, useWillUnmount, TargetEventHook } from "hooks";

/**
 *
 * @kind 10-Scroll
 */
export const useScroll: TargetEventHook = (handler, options) => {
  const { ref = document.body, handlerOptions, disabled = false } = options || {};

  const didUnmount = useRef(false);

  const handlerRef = useRef<typeof handler>();

  useDidUpdate(
    () => {
      handlerRef.current = handler;
    },
    [handler],
    true,
  );

  useDidUpdate(
    () => {
      if (!isBrowser || !ref || disabled) return;

      const eventListener: typeof handler = (event) =>
        !didUnmount.current && handlerRef.current && handlerRef.current(event);

      ref.addEventListener("wheel", eventListener, handlerOptions);

      return () => ref.removeEventListener("wheel", eventListener, handlerOptions);
    },
    [isBrowser, ref, disabled],
    true,
  );

  useWillUnmount(() => {
    didUnmount.current = true;
  });
};