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 ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);
    if (Object.getOwnPropertySymbols) {
        var symbols = Object.getOwnPropertySymbols(object);
        if (enumerableOnly) {
            symbols = symbols.filter(function(sym) {
                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
            });
        }
        keys.push.apply(keys, symbols);
    }
    return keys;
}
function _object_spread_props(target, source) {
    source = source != null ? source : {};
    if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
        ownKeys(Object(source)).forEach(function(key) {
            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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 { SquareArrowUpRight } from "@sofa-design/icons";
import classNames from "classnames";
import React, { memo, useMemo, useState } from "react";
import { useRefFunction } from "../../Hooks/useRefFunction";
import { useStyle } from "./style";
/**
 * VisualList 组件 - 视觉列表组件
 *
 * 一个灵活的图片列表组件，支持多种尺寸、形状和自定义渲染。
 * 基于 css-in-js 样式系统，提供良好的主题支持和样式隔离。
 *
 * @component
 * @description 用于展示图片列表的组件，支持头像、缩略图等多种场景
 * @example
 * ```tsx
 * import { VisualList, VisualListItem } from '@ant-design/agentic-ui';
 *
 * const imageData: VisualListItem[] = [
 *   {
 *     id: '1',
 *     src: 'https://example.com/image1.jpg',
 *     alt: 'Image 1',
 *     title: 'Image Title',
 *     href: 'https://example.com/profile/1'
 *   }
 * ];
 *
 * // 基础用法
 * <VisualList data={imageData} />
 *
 * // 大尺寸圆形头像
 * <VisualList data={imageData} shape="circle" />
 *
 * // 带边框的列表
 * <VisualList data={imageData} variant="outline" />
 *
 * // 无边框的列表
 * <VisualList data={imageData} variant="borderless" />
 *
 * // 带描述文字的列表
 * <VisualList data={imageData} description="用户头像列表" />
 *
 * // 过滤数据
 * <VisualList data={imageData} filter={(item) => item.href !== undefined} />
 * ```
 *
 * @param props - 组件属性
 * @returns 渲染的视觉列表组件
 */ var VisualListComponent = function(param) {
    var className = param.className, style = param.style, data = param.data, filter = param.filter, emptyRender = param.emptyRender, renderItem = param.renderItem, tmp = param.loading, legacyLoading = tmp === void 0 ? false : tmp, isLoading = param.isLoading, loadingRender = param.loadingRender, itemStyle = param.itemStyle, imageStyle = param.imageStyle, linkStyle = param.linkStyle, _param_shape = param.shape, shape = _param_shape === void 0 ? 'default' : _param_shape, _param_prefixCls = param.prefixCls, prefixCls = _param_prefixCls === void 0 ? 'visual-list' : _param_prefixCls, _param_variant = param.variant, variant = _param_variant === void 0 ? 'default' : _param_variant, description = param.description;
    // 兼容旧属性
    var loading = isLoading !== null && isLoading !== void 0 ? isLoading : legacyLoading;
    var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
    // 使用 useMemo 优化过滤后的数据计算
    var displayList = useMemo(function() {
        if (!filter) {
            return data || [];
        }
        return (data === null || data === void 0 ? void 0 : data.filter(filter)) || [];
    }, [
        data,
        filter
    ]);
    // 使用 useMemo 优化容器类名计算
    var containerClassName = useMemo(function() {
        var _obj;
        return classNames("".concat(prefixCls, "-container"), hashId, (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-outline"), variant === 'outline'), _define_property(_obj, "".concat(prefixCls, "-borderless"), variant === 'borderless'), _define_property(_obj, "".concat(prefixCls, "-default"), variant === 'default'), _obj), className);
    }, [
        prefixCls,
        hashId,
        variant,
        className
    ]);
    /**
   * 图片组件 - 独立的 memo 组件，避免不必要的重渲染
   */ var ImageComponent = /*#__PURE__*/ memo(function(param) {
        var item = param.item, prefixCls = param.prefixCls, hashId = param.hashId, shape = param.shape, imageStyle = param.imageStyle, onImageError = param.onImageError;
        var _useState = _sliced_to_array(useState(false), 2), imageError = _useState[0], setImageError = _useState[1];
        var handleImageError = useRefFunction(function() {
            setImageError(true);
            onImageError();
        });
        if (imageError || !item.src) {
            return /*#__PURE__*/ React.createElement("div", {
                "data-type": "image",
                className: classNames("".concat(prefixCls, "-default-icon"), hashId),
                style: _object_spread_props(_object_spread({}, imageStyle), {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: '#f5f5f5',
                    border: '1px solid #d9d9d9',
                    borderRadius: shape === 'circle' ? '50%' : '4px'
                })
            }, /*#__PURE__*/ React.createElement(SquareArrowUpRight, null));
        }
        return /*#__PURE__*/ React.createElement("img", {
            src: item.src,
            alt: item.alt || item.title || '',
            title: item.title,
            className: classNames("".concat(prefixCls, "-image"), hashId),
            style: imageStyle,
            onError: handleImageError
        });
    });
    /**
   * 默认列表项渲染函数 - 使用 useRefFunction 优化
   */ var defaultRenderItem = useRefFunction(function(item, index) {
        var itemClassNames = [
            "".concat(prefixCls, "-item"),
            shape === 'circle' ? "".concat(prefixCls, "-item-circle") : '',
            hashId
        ].filter(Boolean).join(' ');
        return /*#__PURE__*/ React.createElement("li", {
            key: item.id || index,
            className: itemClassNames,
            style: itemStyle
        }, item.href ? /*#__PURE__*/ React.createElement("a", {
            href: item.href,
            className: classNames("".concat(prefixCls, "-link"), hashId),
            style: linkStyle
        }, /*#__PURE__*/ React.createElement(ImageComponent, {
            item: item,
            prefixCls: prefixCls,
            hashId: hashId,
            shape: shape,
            imageStyle: imageStyle,
            onImageError: function() {}
        })) : /*#__PURE__*/ React.createElement(ImageComponent, {
            item: item,
            prefixCls: prefixCls,
            hashId: hashId,
            shape: shape,
            imageStyle: imageStyle,
            onImageError: function() {}
        }));
    });
    // 使用 useMemo 优化列表渲染
    var listItems = useMemo(function() {
        return displayList.map(function(item, index) {
            if (renderItem) {
                return renderItem(item, index);
            }
            return defaultRenderItem(item, index);
        });
    }, [
        displayList,
        renderItem,
        defaultRenderItem
    ]);
    // 加载状态渲染
    if (loading) {
        return wrapSSR(/*#__PURE__*/ React.createElement("ul", {
            className: classNames(prefixCls, "".concat(prefixCls, "-loading"), hashId, className),
            style: style
        }, loadingRender ? loadingRender() : /*#__PURE__*/ React.createElement("span", null, "加载中...")));
    }
    // 空状态渲染
    if (displayList.length === 0) {
        return wrapSSR(/*#__PURE__*/ React.createElement("ul", {
            className: classNames(prefixCls, "".concat(prefixCls, "-empty"), hashId, className),
            style: style
        }, emptyRender ? emptyRender() : /*#__PURE__*/ React.createElement("span", null, "暂无数据")));
    }
    return wrapSSR(/*#__PURE__*/ React.createElement("div", {
        className: containerClassName,
        style: style
    }, /*#__PURE__*/ React.createElement("ul", {
        className: classNames(prefixCls, hashId)
    }, listItems), /*#__PURE__*/ React.createElement("div", {
        style: {
            width: 4
        }
    }), description && /*#__PURE__*/ React.createElement("div", {
        className: classNames("".concat(prefixCls, "-description"), hashId)
    }, description)));
};
// 使用 React.memo 优化组件重渲染
export var VisualList = /*#__PURE__*/ memo(VisualListComponent);
