function _array_like_to_array(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
    return arr2;
}
function _array_with_holes(arr) {
    if (Array.isArray(arr)) return arr;
}
function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
function _iterable_to_array_limit(arr, i) {
    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
    if (_i == null) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _s, _e;
    try {
        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
            _arr.push(_s.value);
            if (i && _arr.length === i) break;
        }
    } catch (err) {
        _d = true;
        _e = err;
    } finally{
        try {
            if (!_n && _i["return"] != null) _i["return"]();
        } finally{
            if (_d) throw _e;
        }
    }
    return _arr;
}
function _non_iterable_rest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _object_spread(target) {
    for(var i = 1; i < arguments.length; i++){
        var source = arguments[i] != null ? arguments[i] : {};
        var ownKeys = Object.keys(source);
        if (typeof Object.getOwnPropertySymbols === "function") {
            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
            }));
        }
        ownKeys.forEach(function(key) {
            _define_property(target, key, source[key]);
        });
    }
    return target;
}
function _sliced_to_array(arr, i) {
    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _array_like_to_array(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
import React, { useEffect, useRef, useState } from "react";
/**
 * LazyElement 组件 - 懒加载元素包裹器
 *
 * 使用 IntersectionObserver API 实现元素的懒加载渲染。
 * 只有当元素进入视口时才会真正渲染内容，否则显示占位符。
 * 这可以显著提升大型文档的渲染性能。
 *
 * @component
 * @description 基于 IntersectionObserver 的懒加载包裹器
 * @param {LazyElementProps} props - 组件属性
 * @param {React.ReactNode} props.children - 需要懒加载的子元素
 * @param {number} [props.placeholderHeight=100] - 占位符高度
 * @param {string} [props.rootMargin='200px'] - 提前加载的距离
 * @param {React.CSSProperties} [props.placeholderStyle] - 自定义占位符样式
 * @param {Function} [props.renderPlaceholder] - 自定义占位符渲染函数
 *
 * @example
 * ```tsx
 * // 基本使用
 * <LazyElement placeholderHeight={150} rootMargin="300px">
 *   <div>这是需要懒加载的内容</div>
 * </LazyElement>
 *
 * // 自定义占位符渲染
 * <LazyElement
 *   placeholderHeight={150}
 *   renderPlaceholder={({ height, style, isIntersecting }) => (
 *     <div style={style}>
 *       <div>加载中... {isIntersecting ? '(即将显示)' : ''}</div>
 *     </div>
 *   )}
 * >
 *   <div>这是需要懒加载的内容</div>
 * </LazyElement>
 * ```
 *
 * @returns {React.ReactElement} 渲染的懒加载元素
 *
 * @remarks
 * - 使用 IntersectionObserver 监听元素是否进入视口
 * - 元素一旦被渲染后将保持渲染状态（不会卸载）
 * - 提供 rootMargin 参数可以提前加载元素
 * - 占位符保持与内容相同的高度以避免布局抖动
 */ export var LazyElement = function LazyElement(param) {
    var children = param.children, _param_placeholderHeight = param.placeholderHeight, placeholderHeight = _param_placeholderHeight === void 0 ? 25 : _param_placeholderHeight, _param_rootMargin = param.rootMargin, rootMargin = _param_rootMargin === void 0 ? '200px' : _param_rootMargin, placeholderStyle = param.placeholderStyle, renderPlaceholder = param.renderPlaceholder, elementInfo = param.elementInfo;
    var containerRef = useRef(null);
    var _useState = _sliced_to_array(useState(false), 2), isVisible = _useState[0], setIsVisible = _useState[1];
    var _useState1 = _sliced_to_array(useState(false), 2), hasRendered = _useState1[0], setHasRendered = _useState1[1];
    var _useState2 = _sliced_to_array(useState(false), 2), isIntersecting = _useState2[0], setIsIntersecting = _useState2[1];
    var observerRef = useRef(null);
    useEffect(function() {
        var container = containerRef.current;
        if (!container) return;
        // 如果已经渲染过，不需要再创建 observer
        if (hasRendered) return;
        // 清理之前的 observer（如果存在）
        if (observerRef.current) {
            observerRef.current.disconnect();
            observerRef.current = null;
        }
        // 创建 IntersectionObserver 实例
        var observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                setIsIntersecting(entry.isIntersecting);
                if (entry.isIntersecting && !hasRendered) {
                    setIsVisible(true);
                    setHasRendered(true);
                    // 元素已经渲染后，不再需要观察
                    if (observerRef.current) {
                        observerRef.current.disconnect();
                        observerRef.current = null;
                    }
                }
            });
        }, {
            rootMargin: rootMargin,
            threshold: 0
        });
        observerRef.current = observer;
        observer.observe(container);
        // 使用 setTimeout 在下一帧检查初始可见性（给 IntersectionObserver 机会先触发）
        var timeoutId = setTimeout(function() {
            // 检查元素是否已经在视口内（解决初始加载时偶发未触发的问题）
            var rect = container.getBoundingClientRect();
            var windowHeight = window.innerHeight || document.documentElement.clientHeight;
            var windowWidth = window.innerWidth || document.documentElement.clientWidth;
            // 只有在元素有实际尺寸且未被渲染时才进行检查
            if (!hasRendered && (rect.height > 0 || rect.width > 0) && windowHeight > 0 && windowWidth > 0) {
                // 解析 rootMargin 来扩展视口检测范围
                var margin = parseInt(rootMargin) || 200;
                var isInViewport = rect.top < windowHeight + margin && rect.bottom > -margin && rect.left < windowWidth + margin && rect.right > -margin;
                if (isInViewport) {
                    setIsVisible(true);
                    setHasRendered(true);
                    if (observerRef.current) {
                        observerRef.current.disconnect();
                        observerRef.current = null;
                    }
                }
            }
        }, 100); // 100ms 延迟，给 IntersectionObserver 充足的时间触发
        return function() {
            clearTimeout(timeoutId);
            if (observerRef.current) {
                observerRef.current.disconnect();
                observerRef.current = null;
            }
        };
    }, [
        rootMargin,
        hasRendered
    ]);
    // 一旦渲染过就保持渲染状态
    if (hasRendered || isVisible) {
        return /*#__PURE__*/ React.createElement("div", {
            ref: containerRef
        }, children);
    }
    // 渲染占位符
    var computedPlaceholderStyle = _object_spread({
        minHeight: placeholderHeight
    }, placeholderStyle);
    // 如果提供了自定义渲染函数，使用它来渲染占位符
    if (renderPlaceholder) {
        return /*#__PURE__*/ React.createElement("div", {
            ref: containerRef,
            "aria-hidden": "true"
        }, renderPlaceholder({
            height: placeholderHeight,
            style: computedPlaceholderStyle,
            isIntersecting: isIntersecting,
            elementInfo: elementInfo
        }));
    }
    // 默认占位符渲染
    return /*#__PURE__*/ React.createElement("div", {
        ref: containerRef,
        style: computedPlaceholderStyle,
        "aria-hidden": "true"
    });
};
