import { RefObject, useEffect } from 'react';
import { reorderPenaltyScore } from './reorderPenaltyScore';

export const useReorderPenaltyScore = (
  ref: RefObject<HTMLDivElement>
): void => {
  useEffect(
    () => {
      let observer: MutationObserver | null = null;

      if (ref.current) {
        reorderPenaltyScore(ref.current);

        observer = new MutationObserver(() => {
          if (ref.current) {
            reorderPenaltyScore(ref.current);
          }
        });

        observer.observe(ref.current, { childList: true, subtree: true });
      }

      return () => {
        if (observer) {
          observer.disconnect();
        }
      };
    },
    [ref]
  );
};