import { __assign, __rest } from "tslib";
import React, { useContext, useEffect, useRef } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
var Image = function (props) {
    var _a;
    var _b = props.alt, alt = _b === void 0 ? 'image' : _b, _c = props.objectFit, objectFit = _c === void 0 ? 'cover' : _c, _d = props.round, round = _d === void 0 ? false : _d, _e = props.lazy, lazy = _e === void 0 ? false : _e, src = props.src, placeholder = props.placeholder, fallback = props.fallback, className = props.className, style = props.style, customisedCls = props.prefixCls, otherProps = __rest(props, ["alt", "objectFit", "round", "lazy", "src", "placeholder", "fallback", "className", "style", "prefixCls"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('image', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, (_a = {}, _a[prefixCls + "_round"] = round, _a));
    var ref = useRef(null);
    useEffect(function () {
        if (lazy && 'IntersectionObserver' in window) {
            var observer = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        var lazyImage = entry.target;
                        lazyImage.src = src || fallback || '';
                        observer.unobserve(lazyImage);
                    }
                });
            });
            var imgNode = ref.current;
            imgNode && observer.observe(imgNode);
        }
    }, [fallback, lazy, src]);
    return (React.createElement("img", __assign({}, otherProps, { ref: ref, className: cls, style: __assign(__assign({}, style), { objectFit: objectFit }), src: lazy ? placeholder : src ? src : fallback, alt: alt })));
};
Image.displayName = 'Image';
export default Image;
//# sourceMappingURL=index.js.map