import { useEffect, useRef } from 'react';

interface IntersectionTriggerProps {
  onTrigger?: () => void;
  onUntrigger?: () => void;
  setIntersecting?: (intersecting: boolean) => void;
  enabled?: boolean;
  threshold?: number;
  scrollMargin?: string;
  children?: React.ReactNode;
  className?: string;
  overdrawHeight?: string | number;
}

export default function IntersectionTrigger({
  onTrigger,
  onUntrigger,
  setIntersecting,
  enabled = true,
  threshold = 0.1,
  scrollMargin,
  children,
  className,
}: IntersectionTriggerProps) {
  const elementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!enabled) return;

    const observer = new IntersectionObserver(
      (entries) => {
        const anyIntersecting = entries.find((e) => e.isIntersecting);
        if (anyIntersecting) {
          onTrigger?.();
        } else {
          onUntrigger?.();
        }
        setIntersecting?.(!!anyIntersecting);
      },
      { threshold }
    );

    if (elementRef.current) {
      const scrollMarginImitator = elementRef.current.querySelector(
        '.scroll-margin-imitator'
      );
      const element = scrollMarginImitator ?? elementRef.current;
      observer.observe(element);
    }

    return () => observer.disconnect();
  }, [enabled, threshold, onTrigger, onUntrigger, setIntersecting]);

  return (
    <div
      ref={elementRef}
      className={`${scrollMargin ? 'relative' : ''}${className ?? ''}`}
    >
      {scrollMargin && (
        <div
          className='scroll-margin-imitator pointer-events-none absolute inset-0 opacity-0'
          style={{ top: `-${scrollMargin}`, bottom: `-${scrollMargin}` }}
        />
      )}
      {children}
    </div>
  );
}