import React__default, { useEffect } from 'react';
import { useInView } from '@jobber/hooks';
import { u as useDataListContext } from './DataListContext-es.js';
import { g as DATA_LOAD_MORE_TEST_ID, h as DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from './DataList.const-es.js';
import { S as Spinner } from './Spinner-es.js';
import { B as Button } from './Button-es.js';
import 'classnames';

var styles = {"trigger":"aJIHa8Q-WbY-","loadingMore":"lLYWNAYcURY-","backToTop":"qA8J2KI6khc-","fadeIn":"WKPuBJINNCg-","spinning":"mZH3CAkfppI-"};

function DataListLoadMoreTrigger() {
    const { onLoadMore } = useDataListContext();
    const [inViewRef, isInView] = useInView();
    useEffect(() => {
        isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
    }, [isInView]);
    return (React__default.createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
}

const MAX_DATA_COUNT = 50;
function DataListLoadMore({ onBackToTop }) {
    const { loadingState, data } = useDataListContext();
    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(DataListLoadMoreTrigger, { key: data.length }),
        loadingState === "loadingMore" && (React__default.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
            React__default.createElement(Spinner, { size: "small" }))),
        showBackToTop && (React__default.createElement("div", { className: styles.backToTop },
            React__default.createElement(Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
}

export { DataListLoadMore as D, MAX_DATA_COUNT as M };
