import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useState, useEffect, useRef, useCallback } from "react";
import { Image as ImageIcon, ImageError } from "@nutui/icons-react";
import classNames from "classnames";
import { ComponentDefaults } from "../../utils/typings";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    fit: 'fill',
    position: 'center',
    alt: '',
    width: '',
    height: '',
    error: true,
    loading: true,
    lazy: false
});
var classPrefix = 'nut-image';
export var Image = function(props) {
    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, src = _$_object_spread.src, fit = _$_object_spread.fit, position = _$_object_spread.position, alt = _$_object_spread.alt, width = _$_object_spread.width, height = _$_object_spread.height, radius = _$_object_spread.radius, error = _$_object_spread.error, loading = _$_object_spread.loading, lazy = _$_object_spread.lazy, draggable = _$_object_spread.draggable, onClick = _$_object_spread.onClick, onLoad = _$_object_spread.onLoad, onError = _$_object_spread.onError;
    var _useState = _sliced_to_array(useState(false), 2), innerLoading = _useState[0], setInnerLoading = _useState[1];
    var _useState1 = _sliced_to_array(useState(false), 2), isError = _useState1[0], setIsError = _useState1[1];
    var _useState2 = _sliced_to_array(useState(false), 2), complete = _useState2[0], setComplete = _useState2[1];
    var imgRef = useRef(null);
    var pxCheck = function(value) {
        return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
    };
    useEffect(function() {
        if (imgRef.current && imgRef.current.complete && !lazy) {
            if (imgRef.current.naturalHeight === 0) {
                handleError();
            } else {
                handleLoad();
            }
        } else {
            // 非 SSR 模式下开启 loading
            setInnerLoading(true);
        }
    }, [
        imgRef
    ]);
    useEffect(function() {
        setComplete(false);
    }, [
        src
    ]);
    var handleLoad = function() {
        if (!complete) {
            setIsError(false);
            setInnerLoading(false);
            onLoad && onLoad();
            setComplete(true);
        }
    };
    var handleError = function() {
        if (!complete) {
            setIsError(true);
            setInnerLoading(false);
            onError && onError();
            setComplete(true);
        }
    };
    var containerStyle = _object_spread({
        height: height ? pxCheck(height) : '',
        width: width ? pxCheck(width) : '',
        overflow: radius !== undefined && radius !== null ? 'hidden' : '',
        borderRadius: radius !== undefined && radius !== null ? pxCheck(radius) : ''
    }, style);
    var imgStyle = _object_spread({
        objectFit: fit,
        objectPosition: position
    }, style);
    // 图片懒加载
    var observer = useRef(null);
    var initObserver = function() {
        var options = {
            threshold: [
                0
            ],
            rootMargin: '0px'
        };
        // 监听dom是否在视口内
        observer.current = new IntersectionObserver(function(entires, self) {
            // entires为监听的节点数组对象
            entires.forEach(function(item) {
                // isIntersecting是当前监听元素交叉区域是否在可视区域指定的阈值内返回的是一个布尔值
                if (item.isIntersecting) {
                    setTimeout(function() {
                        var img = item.target;
                        if (img.dataset.src) {
                            img.src = img.dataset.src;
                            img.removeAttribute('data-src');
                        }
                        // 资源加载后停止监听
                        resetObserver();
                    }, 300);
                }
            });
        }, options);
        observer.current.observe(imgRef.current);
    };
    // 使用disconnect将取消的Observer实例中的所有监听
    var resetObserver = function() {
        observer.current.disconnect && observer.current.disconnect();
    };
    useEffect(function() {
        lazy && initObserver();
        return function() {
            lazy && resetObserver();
        };
    }, [
        lazy
    ]);
    var imageClick = function(event) {
        onClick && onClick(event);
    };
    var renderErrorImg = useCallback(function() {
        if (!isError) return null;
        if (typeof error === 'boolean' && error === true && !innerLoading) {
            return /*#__PURE__*/ React.createElement("div", {
                className: "".concat(classPrefix, "-error")
            }, /*#__PURE__*/ React.createElement(ImageError, null));
        }
        if (/*#__PURE__*/ React.isValidElement(error) && !innerLoading) {
            return /*#__PURE__*/ React.createElement("div", {
                className: "".concat(classPrefix, "-error")
            }, error);
        }
        return null;
    }, [
        error,
        isError
    ]);
    var renderLoading = useCallback(function() {
        if (!loading) return null;
        if (typeof loading === 'boolean' && loading === true && innerLoading) {
            return /*#__PURE__*/ React.createElement("div", {
                className: "".concat(classPrefix, "-loading")
            }, /*#__PURE__*/ React.createElement(ImageIcon, null));
        }
        if (/*#__PURE__*/ React.isValidElement(loading) && innerLoading) {
            return /*#__PURE__*/ React.createElement("div", {
                className: "".concat(classPrefix, "-loading")
            }, loading);
        }
        return null;
    }, [
        loading,
        innerLoading
    ]);
    return /*#__PURE__*/ React.createElement("div", {
        className: classNames(classPrefix, className),
        style: containerStyle,
        onClick: function(e) {
            imageClick(e);
        }
    }, lazy ? /*#__PURE__*/ React.createElement("img", {
        ref: imgRef,
        className: "".concat(classPrefix, "-default lazyload"),
        style: imgStyle,
        "data-src": src,
        alt: alt,
        loading: "lazy",
        onLoad: handleLoad,
        onError: handleError,
        draggable: draggable
    }) : /*#__PURE__*/ React.createElement("img", {
        ref: imgRef,
        className: "".concat(classPrefix, "-default"),
        style: imgStyle,
        src: src,
        alt: alt,
        onLoad: handleLoad,
        onError: handleError,
        draggable: draggable
    }), renderLoading(), renderErrorImg());
};
Image.displayName = 'NutImage';
