"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const react_1 = tslib_1.__importStar(require("react"));
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
const Pagination = ({ currentPage, handleChangePage, totalPages, rowQuantity, count, router }) => {
    const [searchParams, setSearchParams] = (0, react_1.useState)({});
    (0, react_1.useEffect)(() => {
        if (typeof window !== 'undefined') {
            const params = new URLSearchParams(window.location.search);
            setSearchParams(params);
        }
    }, []);
    const handleClickPage = (page, isAction) => {
        if (!isAction)
            return;
        handleChangePage(page);
        const params = new URLSearchParams(searchParams + '');
        params.set('pagi', page + '');
        router === null || router === void 0 ? void 0 : router.push(`?${params + ''}`, { scroll: false });
    };
    const disableNextPage = currentPage === totalPages;
    const disablePrevPage = currentPage === 1;
    const PreviousPage = () => (react_1.default.createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex bg-gray-200 rounded-tl-lg pb-1 pt-0.5 rounded-bl-lg items-center px-3 text-gray-900 focus:z-20 focus:outline-offset-0 min-h-[1.75rem]', !disablePrevPage ? 'hover:bg-gray-300' : '', !disablePrevPage
            ? 'active:bg-gray-300 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:pt-[0.2rem] active:pb-[0.2rem]'
            : '', !disablePrevPage ? 'cursor-pointer' : ''), onClick: () => handleClickPage(currentPage - 1, !disablePrevPage) },
        react_1.default.createElement("p", null,
            react_1.default.createElement("span", { className: 'sr-only' }, "Previous"),
            react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: classNames('w-2.5 h-3', disablePrevPage ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleLeft }))));
    const NextPage = () => (react_1.default.createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex rounded-tr-lg bg-gray-200 pb-1 pt-0.5 rounded-br-lg items-center rounded-r-md px-3 text-gray-900 focus:z-20 focus:outline-offset-0 min-h-[1.75rem]', !disableNextPage ? 'hover:bg-gray-300' : '', !disableNextPage
            ? 'active:bg-gray-300 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:pt-[0.01rem] active:pb-[0.03rem]'
            : '', !disableNextPage ? 'cursor-pointer' : ''), onClick: () => handleClickPage(currentPage + 1, !disableNextPage) },
        react_1.default.createElement("p", null,
            react_1.default.createElement("span", { className: 'sr-only' }, "Next"),
            react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: classNames('w-2.5 h-3', disableNextPage ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleRight }))));
    const startIndex = (currentPage - 1) * rowQuantity + 1;
    const endIndex = (currentPage - 1) * rowQuantity + rowQuantity;
    return (react_1.default.createElement("div", { className: 'flex items-center gap-x-3' },
        react_1.default.createElement("p", { className: 'hidden whitespace-nowrap text-xs sm:block' },
            "Hi\u1EC3n th\u1ECB ",
            startIndex,
            " - ",
            endIndex >= count ? count : endIndex,
            " tr\u00EAn ",
            count,
            " b\u1EA3n ghi"),
        react_1.default.createElement("div", { className: 'shadow-sm isolate inline-flex -space-x-px rounded-md bg-white' },
            react_1.default.createElement("div", { className: 'mr-1' },
                react_1.default.createElement(PreviousPage, null)),
            react_1.default.createElement(NextPage, null))));
};
exports.default = Pagination;
//# sourceMappingURL=Pagination.js.map