import { faAngleRight, faAngleLeft } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
const PaginationV5 = ({ currentPage, handleChangePage, totalPages, pagination, rowQuantity, count, routerPush, searchParams, tableKey, setAfterRecord, setBeforeRecord, pageInfo, }) => {
    const pages = [];
    for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
    }
    const handleClickPage = (page, type) => {
        handleChangePage(page);
        const params = new URLSearchParams(searchParams + '');
        params.set(`pagi-${tableKey}`, page + '');
        if (type === 'next') {
            params.set(`after-${tableKey}`, pageInfo.endCursor);
            params.delete(`before-${tableKey}`);
            setAfterRecord(pageInfo.endCursor);
            setBeforeRecord('');
        }
        if (type === 'prev') {
            params.delete(`after-${tableKey}`);
            params.set(`before-${tableKey}`, pageInfo.startCursor);
            setAfterRecord('');
            setBeforeRecord(pageInfo.startCursor);
        }
        routerPush(`?${params + ''}`);
    };
    const disableNextPage = !totalPages || currentPage === totalPages;
    const disablePrevPage = currentPage === 1;
    const PreviousPage = () => (React.createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex min-h-[1.75rem] items-center rounded-bl-lg rounded-tl-lg bg-gray-100 px-3 pb-1 pt-0.5 text-gray-900 focus:z-20 focus:outline-offset-0', !disablePrevPage ? 'hover:bg-gray-200' : '', !disablePrevPage
            ? 'active:bg-gray-300 active:pb-[0.2rem] active:pt-[0.2rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]'
            : '', !disablePrevPage ? 'cursor-pointer' : ''), onClick: () => {
            if (!disablePrevPage) {
                handleClickPage(currentPage - 1, 'prev');
            }
        } },
        React.createElement("p", null,
            React.createElement("span", { className: 'sr-only' }, "Previous"),
            React.createElement(FontAwesomeIcon, { className: classNames('h-3 w-2.5', disablePrevPage ? 'text-gray-300' : 'text-gray-900'), icon: faAngleLeft }))));
    const NextPage = () => (React.createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex min-h-[1.75rem] items-center rounded-r-md rounded-br-lg rounded-tr-lg bg-gray-100 px-3 pb-1 pt-0.5 text-gray-900 focus:z-20 focus:outline-offset-0', !disableNextPage ? 'hover:bg-gray-200' : '', !disableNextPage
            ? 'active:bg-gray-300 active:pb-[0.03rem] active:pt-[0.01rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]'
            : '', !disableNextPage ? 'cursor-pointer' : ''), onClick: () => {
            if (!disableNextPage) {
                handleClickPage(currentPage + 1, 'next');
            }
        } },
        React.createElement("p", null,
            React.createElement("span", { className: 'sr-only' }, "Next"),
            React.createElement(FontAwesomeIcon, { className: classNames('h-3 w-2.5', disableNextPage ? 'text-gray-300' : 'text-gray-900'), icon: faAngleRight }))));
    const startIndex = count > 0 ? pagination * rowQuantity + 1 : count;
    const endIndex = pagination * rowQuantity + rowQuantity;
    return (React.createElement("div", { className: 'flex items-center gap-x-3' },
        React.createElement("p", { className: 'hidden text-xs sm:block' },
            "Hi\u1EC3n th\u1ECB ",
            startIndex,
            " - ",
            endIndex >= count ? count : endIndex,
            " tr\u00EAn ",
            count,
            " b\u1EA3n ghi"),
        React.createElement("div", { className: 'isolate inline-flex -space-x-px rounded-md bg-white shadow-sm' },
            React.createElement("div", { className: 'mr-1' },
                React.createElement(PreviousPage, null)),
            React.createElement(NextPage, null))));
};
export default PaginationV5;
//# sourceMappingURL=PaginationV5.js.map