"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const types_1 = require("../../types");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const PaginaitonSelected_1 = tslib_1.__importDefault(require("./PaginaitonSelected"));
const utils_1 = require("../utils");
const direct_link_1 = require("../../../hooks/direct-link");
function Pagination({ pagination, currentPage, setCurrentPage, offset, setOffset, tableKey, configUrlApply, }) {
    const directLink = (0, direct_link_1.PHXUseDirectLink)();
    (0, react_1.useEffect)(() => {
        if (configUrlApply) {
            const { searchParams } = configUrlApply;
            const pageQuery = utils_1.applyUrlQuery.get(searchParams, `pagi-${tableKey}`);
            if (pageQuery && pagination.onChange) {
                setCurrentPage(Number(pageQuery));
                setOffset(Number(pageQuery) - 1);
                pagination.onChange(Number(pageQuery));
            }
        }
    }, []);
    const handleClickPage = (page) => {
        var _a;
        setCurrentPage(page);
        setOffset(page - 1);
        if (pagination.onChange) {
            pagination.onChange(page);
        }
        if (configUrlApply) {
            utils_1.applyUrlQuery.set(((_a = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _a === void 0 ? void 0 : _a.push) || directLink, configUrlApply.searchParams, [
                { key: `pagi-${tableKey}`, value: page + '' },
            ]);
        }
    };
    const totalPages = Math.ceil(pagination.dataAggregate / pagination.rowNumberInPage);
    const disableNextPage = !totalPages || currentPage === totalPages;
    const disablePrevPage = currentPage === 1;
    const PreviousPage = () => (react_1.default.createElement("a", { "aria-hidden": true, className: (0, types_1.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);
            }
        } },
        react_1.default.createElement("p", null,
            react_1.default.createElement("span", { className: 'sr-only' }, "Previous"),
            react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: (0, types_1.classNames)('h-3 w-2.5', 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: (0, types_1.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);
            }
        } },
        react_1.default.createElement("p", null,
            react_1.default.createElement("span", { className: 'sr-only' }, "Next"),
            react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: (0, types_1.classNames)('h-3 w-2.5', disableNextPage ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleRight }))));
    const startIndex = pagination.dataAggregate > 0 ? offset * pagination.rowNumberInPage + 1 : pagination.dataAggregate;
    const endIndex = offset * pagination.rowNumberInPage + pagination.rowNumberInPage;
    return (react_1.default.createElement("div", { className: 'flex items-center justify-between rounded-lg rounded-tl-none rounded-tr-none border-t border-gray-200 bg-[#F9FAFB] py-2 pl-7 pr-2' },
        react_1.default.createElement(PaginaitonSelected_1.default, { paginationChange: pagination === null || pagination === void 0 ? void 0 : pagination.onChange, rowQuantity: pagination.rowNumberInPage, setCurrentPage: setCurrentPage, setRowQuantity: pagination === null || pagination === void 0 ? void 0 : pagination.setRowNumberInPage, setOffset: setOffset, tableKey: tableKey, configUrlApply: configUrlApply }),
        react_1.default.createElement("div", { className: 'flex items-center gap-x-3' },
            react_1.default.createElement("p", { className: 'hidden text-xs sm:block' },
                "Hi\u1EC3n th\u1ECB ",
                startIndex,
                " - ",
                endIndex >= pagination.dataAggregate ? pagination.dataAggregate : endIndex,
                " tr\u00EAn",
                ' ',
                pagination.dataAggregate,
                " b\u1EA3n ghi"),
            react_1.default.createElement("div", { className: '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