import { APP_MODE } from '@pos/base/infrastructure/constants';
import { ReactNode, useEffect } from 'react';
import { useRecoilSnapshot } from 'recoil';

export function DebugObserver(): ReactNode {
  const snapshot = useRecoilSnapshot();
  useEffect(() => {
    if (APP_MODE === 'development') {
      console.debug(
        '%c' + 'The following atoms were modified:',
        'color:yellow; font-weight:bold; text-transform: uppercase;',
      );
      for (const node of snapshot.getNodes_UNSTABLE({ isModified: true })) {
        console.debug('%c' + node.key, 'color:white; background-color:blue', snapshot.getLoadable(node));
      }
      console.debug('%c' + '----------------------------------------', 'color:white');
    }
  }, [snapshot]);

  return null;
}
