import { useRef, useEffect } from 'react';

// Global flag to enable/disable render tracking across the application
const RENDER_TRACKING_ENABLED = false;

const COMPONENTS_TO_TRACK = new Set<string>([
  'ChatOutput',
  'useCustomParsedBlocks'
])

// Helper function to check if component should be tracked
const shouldTrackComponent = (componentName: string): boolean => {
  return RENDER_TRACKING_ENABLED && (COMPONENTS_TO_TRACK.has(componentName));
};

/**
 * Custom hook to track and log component re-renders and which dependencies caused the re-render.
 * @param {string} componentName - Name of the component for identification.
 * @param {object} dependencies - An object containing variables to track.
 * @param {object} options - Optional configuration object
 */
const useRenderTracker = (
  componentName: string, 
  dependencies?: Record<string, unknown>,
  options: { 
    logAllRenders?: boolean,  // Log even when no tracked deps changed
    logRenderCount?: boolean  // Include render count in logs
  } = { logAllRenders: true, logRenderCount: true }
) => {
  const renderCount = useRef(0);
  const prevDeps = useRef(dependencies);
  const firstRender = useRef(true);
  const shouldTrack = useRef(shouldTrackComponent(componentName));

  renderCount.current += 1;

  useEffect(() => {
    if (!shouldTrack.current) {
      return; 
    }

    // Skip logging on first render unless explicitly configured
    if (firstRender.current) {
      firstRender.current = false;
      console.log(`[RenderTracker] ${componentName} mounted`);
      return;
    }

    if (dependencies) {
      const changedDeps = Object.entries(dependencies).reduce((acc: Record<string, { prev: unknown; current: unknown }>, [key, value]) => {
        if (prevDeps.current && prevDeps.current[key as keyof typeof prevDeps.current] !== value) {
          acc[key] = {
            prev: prevDeps.current[key as keyof typeof prevDeps.current],
            current: value
          };
        }
        return acc;
      }, {});

      const hasChanges = Object.keys(changedDeps).length > 0;

      if (hasChanges || options.logAllRenders) {
        console.group(`[RenderTracker] ${componentName} re-rendered${options.logRenderCount ? ` (${renderCount.current})` : ''}`);
        
        if (hasChanges) {
          console.log('Changed dependencies:', changedDeps);
        } else {
          console.log('Re-rendered without dependency changes');
        }
        
        console.groupEnd();
      }
      
      prevDeps.current = dependencies;
    } else if (options.logAllRenders) {
      console.log(`[RenderTracker] ${componentName} re-rendered${options.logRenderCount ? ` (${renderCount.current})` : ''}`);
    }
  });

  // Return render count for potential use in components
  return renderCount.current;
};

export default useRenderTracker;