import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { useCallback } from "react";
import cx from "classnames";
import { defaultImport } from "default-import";
import ReactContentLoader from "react-content-loader";
import { LoadingMask } from "../LoadingMask/LoadingMask.js";
import { List } from "./List.js";
// There are known compatibility issues between CommonJS (CJS) and ECMAScript modules (ESM).
// In ESM, default exports of CJS modules are wrapped in default properties instead of being exposed directly.
// https://github.com/microsoft/TypeScript/issues/52086#issuecomment-1385978414
const ContentLoader = defaultImport(ReactContentLoader);
/**
 * @internal
 */
export function AsyncList(props) {
    const { className, width, height, items, itemHeight, renderItem, renderLoadingItem, isLoading, nextPageItemPlaceholdersCount = 0, isLoadingNextPage, onLoadNextPage, } = props;
    const itemRenderer = useCallback((renderItemProps) => {
        if (renderItemProps.rowIndex + 1 > items.length) {
            return renderLoadingItem?.(renderItemProps) ?? _jsx(LoadingPlaceholder, {});
        }
        return renderItem(renderItemProps);
    }, [items, renderItem, renderLoadingItem]);
    const handleScrollEnd = useCallback((_, endRowIndex) => {
        if (endRowIndex > items.length && !isLoadingNextPage) {
            onLoadNextPage?.();
        }
    }, [items, isLoadingNextPage, onLoadNextPage]);
    return isLoading ? (_jsx(LoadingMask, { height: props.height })) : (_jsx(List, { className: cx("gd-async-list", className || ""), width: width, height: height, items: items, itemHeight: itemHeight, itemsCount: items.length + nextPageItemPlaceholdersCount, renderItem: itemRenderer, onScrollEnd: handleScrollEnd }));
}
function LoadingPlaceholder() {
    return (_jsx("div", { className: "gd-list-item gd-list-item-not-loaded", children: _jsxs(ContentLoader, { viewBox: "0 0 250 28", children: [
                _jsx("rect", { x: "0", y: "7", rx: "3", ry: "3", width: "13", height: "13" }), _jsx("rect", { x: "22", y: "7", rx: "3", ry: "3", width: "250", height: "13" })
            ] }) }));
}
