"use client";
import { useEffect } from "react";
import { useEnsuredRef } from "./useEnsuredRef.js";
/**
 * @example Simple Example
 * ```tsx
 * // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example
 *
 * import { useIntersectionObserver } from "@react-md/core";
 * import type { ReactElement } from "react";
 * import { useState } from "react";
 *
 * import styles from "./Example.module.scss";
 *
 * const numSteps = 20;
 * const thresholds = Array.from({ length: numSteps }, (_, i) => i / numSteps);
 * thresholds.push(0);
 *
 * const INCREASING = "rgba(40, 40, 190, ratio)";
 * const DECREASING = "rgba(190, 40, 40, ratio)";
 *
 * export default function Example(): ReactElement {
 *   const [{ ratio, increasing }, setState] = useState({
 *     ratio: 0.0,
 *     increasing: true,
 *   });
 *
 *   const targetRef = useIntersectionObserver({
 *     threshold: thresholds,
 *     rootMargin: "0px",
 *     onUpdate: useCallback(([entry]) => {
 *       const { intersectionRatio } = entry;
 *       setState((prevState) => {
 *         return {
 *           ratio: intersectionRatio,
 *           increasing: intersectionRatio > prevState.ratio,
 *         };
 *       });
 *     }, []),
 *   });
 *
 *   return (
 *     <div
 *       ref={targetRef}
 *       className={styles.box}
 *       style={{
 *         backgroundColor: (increasing ? INCREASING : DECREASING).replace(
 *           "ratio",
 *           `${ratio}`
 *         ),
 *       }}
 *     >
 *       <div className={styles.vertical}>
 *         Welcome to <strong>The Box!</strong>
 *       </div>
 *     </div>
 *   );
 * }
 * ```
 *
 * @since 6.0.0
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
 */ export function useIntersectionObserver(options) {
    const { ref, root, disabled = false, onUpdate, threshold, rootMargin, getTargets, getThreshold, getRootMargin } = options;
    const [targetNodeRef, targetRef] = useEnsuredRef(ref);
    useEffect(()=>{
        const element = targetNodeRef.current;
        let targets = [];
        if (getTargets) {
            targets = getTargets();
        } else if (element) {
            targets = [
                element
            ];
        }
        if (disabled || !targets.length) {
            return;
        }
        let resolvedRoot;
        if (root && "current" in root) {
            resolvedRoot = root.current;
        } else {
            resolvedRoot = root;
        }
        const options = {
            root: resolvedRoot,
            threshold: (getThreshold || (()=>threshold))(),
            rootMargin: (getRootMargin || (()=>rootMargin))()
        };
        // Just like the ResizeObserver, you can see performance improvements by
        // sharing a single intersection observer but I don't think it's worth the
        // effort to implement here since I'd need to:
        // - check if there is an observer with the same options
        //   - if there is, add the callback to that existing observer
        //   - if there isn't, create a new observer
        // - when cleaning up, check if there are any other existing callbacks
        //   - disconnect and remove the observer if there are none left
        const observer = new IntersectionObserver(onUpdate, options);
        targets.forEach((target)=>{
            observer.observe(target);
        });
        return ()=>{
            observer.disconnect();
        };
    }, [
        disabled,
        getRootMargin,
        getTargets,
        getThreshold,
        onUpdate,
        root,
        rootMargin,
        targetNodeRef,
        threshold
    ]);
    return targetRef;
}

//# sourceMappingURL=useIntersectionObserver.js.map