import { MutableRefObject } from "react";

import { useDidUpdate } from "hooks";

const defaultOptions: MutationObserverInit = {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
};

/**
 *
 * @kind 07-Misc
 */
export const useMutationObserver = (
  ref: MutableRefObject<HTMLElement | null>,
  callback: MutationCallback,
  options: MutationObserverInit = defaultOptions,
) => {
  useDidUpdate(
    () => {
      if (ref.current) {
        const observer = new MutationObserver(callback);
        observer.observe(ref.current, options);
        return observer.disconnect;
      }
    },
    [callback, options, ref],
    true,
  );
};