import { useState, useEffect, useRef } from 'react';

export type VisibilityMode = 'all' | 'filtered' | 'essential';

/**
 * Observes container width via ResizeObserver and returns a visibility mode
 * for table columns. Adjusts thresholds when a side panel is open.
 */
export function useTableVisibility(
  containerRef: React.RefObject<HTMLElement>,
  panelOpen: boolean
): VisibilityMode {
  const [mode, setMode] = useState<VisibilityMode>('all');
  const timerRef = useRef<ReturnType<typeof setTimeout>>();

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;

    const calculate = (width: number): VisibilityMode => {
      if (panelOpen) {
        return width >= 600 ? 'filtered' : 'essential';
      }
      if (width >= 900) return 'all';
      if (width >= 600) return 'filtered';
      return 'essential';
    };

    const observer = new ResizeObserver((entries) => {
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => {
        const entry = entries[0];
        if (entry) {
          setMode(calculate(entry.contentRect.width));
        }
      }, 50);
    });

    observer.observe(el);
    // Set initial value
    setMode(calculate(el.getBoundingClientRect().width));

    return () => {
      observer.disconnect();
      clearTimeout(timerRef.current);
    };
  }, [containerRef, panelOpen]);

  // Recalculate when panelOpen changes
  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const width = el.getBoundingClientRect().width;
    if (panelOpen) {
      setMode(width >= 600 ? 'filtered' : 'essential');
    } else {
      if (width >= 900) setMode('all');
      else if (width >= 600) setMode('filtered');
      else setMode('essential');
    }
  }, [panelOpen, containerRef]);

  return mode;
}