import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import Button from '../Button';
import ListingSelectors from './ListingSelectors';
import PaginationSelectors from './PaginationSelectors';
var PaginationControls = function (_a) {
    var className = _a.className, endOfItemsMessage = _a.endOfItemsMessage, isLoading = _a.isLoading, onLoadMore = _a.onLoadMore;
    var hasItems = useSelector(ListingSelectors.hasItems);
    var hasMorePages = useSelector(PaginationSelectors.hasMorePages);
    return (React.createElement("div", { className: [
            className,
            'pagination-controls',
        ]
            .filter(Boolean)
            .join(' ') },
        hasMorePages &&
            React.createElement(Button, { className: "pagination-controls__load-more-button", disabled: isLoading, onClick: onLoadMore }, "Load More"),
        hasItems && !hasMorePages &&
            React.createElement("div", { className: "pagination-controls__end-of-items-message" }, endOfItemsMessage)));
};
PaginationControls.propTypes = {
    className: PropTypes.string,
    endOfItemsMessage: PropTypes.node.isRequired,
    isLoading: PropTypes.bool.isRequired,
    onLoadMore: PropTypes.func.isRequired,
};
PaginationControls.defaultProps = {
    className: '',
};
export default PaginationControls;
//# sourceMappingURL=PaginationControls.js.map