'use strict';

var React = require('react');
var jobberHooks = require('@jobber/hooks');
var DataListContext = require('./DataListContext-cjs.js');
var DataList_const = require('./DataList.const-cjs.js');
var Spinner = require('./Spinner-cjs.js');
var Button = require('./Button-cjs.js');
require('classnames');

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

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

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

exports.DataListLoadMore = DataListLoadMore;
exports.MAX_DATA_COUNT = MAX_DATA_COUNT;
