var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { cn } from "@utils";
import { Button } from "../button";
import { iconList } from "../adpIcon";
import { paginationVariants, paginationPageContainerVariants, paginationPageButtonVariants, paginationEllipsisVariants, paginationTextVariants } from "./paginationVariants";
const formatPageNumber = (number) => {
    return number.toString().padStart(2, "0"); // Always ensure a minimum of two digits
};
/**
 * Pagination component for navigating through multiple pages of content.
 */
export const Pagination = React.forwardRef((_a, ref) => {
    var { totalPages = 1, activePageNo = 1, layout = "detailed", variant = "filled", showLabels = true, onPageChange, className } = _a, props = __rest(_a, ["totalPages", "activePageNo", "layout", "variant", "showLabels", "onPageChange", "className"]);
    const [activePgNo, setActivePgNo] = useState(activePageNo);
    // Sync internal state with the controlled activePageNo prop if provided
    useEffect(() => {
        if (activePageNo !== undefined) {
            setActivePgNo(activePageNo);
        }
    }, [activePageNo, totalPages]);
    const handleClick = useCallback((page) => {
        if (page >= 1 && page <= totalPages) {
            setActivePgNo(page);
            onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
        }
    }, [totalPages, onPageChange, setActivePgNo]);
    const renderPageNumbers = useMemo(() => {
        // Render Page Button
        const PageButton = ({ pageNumber }) => activePgNo === pageNumber ? (_jsx(Button, { size: "sm", variant: variant, className: "h-8 w-8 p-2.5", onClick: () => handleClick(pageNumber), color: variant === "filled" ? "primary" : "secondary", "aria-current": "page", "aria-label": `Page ${pageNumber}, current`, children: formatPageNumber(pageNumber) })) : (_jsx("button", { className: cn(paginationPageButtonVariants({ variant }), variant === "filled" ? "button-text" : ""), onClick: () => handleClick(pageNumber), "aria-label": `Page ${pageNumber}`, children: formatPageNumber(pageNumber) }));
        const Ellipsis = () => (_jsx("span", { className: cn(paginationEllipsisVariants()), children: "..." }));
        if (totalPages <= 10) {
            // Simple pagination for 10 or fewer pages
            return Array.from({ length: totalPages }, (_, i) => i + 1).map((i) => (_jsx(PageButton, { pageNumber: i }, i)));
        }
        else {
            // Advanced pagination for greater than 10 pages
            if (activePgNo <= 4) {
                // Active page is less than or equals to 4
                return [
                    ...Array.from({ length: 5 }, (_, i) => i + 1).map((i) => (_jsx(PageButton, { pageNumber: i }, i))),
                    _jsx(Ellipsis, {}, "start"),
                    _jsx(PageButton, { pageNumber: totalPages }, totalPages)
                ];
            }
            else if (activePgNo > 4 && activePgNo <= totalPages - 4) {
                // Active page is greater than 4 and less than totalpage - 4
                return [
                    _jsx(PageButton, { pageNumber: 1 }, 1),
                    _jsx(Ellipsis, {}, "start"),
                    _jsx(PageButton, { pageNumber: activePgNo - 1 }, activePgNo - 1),
                    _jsx(PageButton, { pageNumber: activePgNo }, activePgNo),
                    _jsx(PageButton, { pageNumber: activePgNo + 1 }, activePgNo + 1),
                    _jsx(Ellipsis, {}, "end"),
                    _jsx(PageButton, { pageNumber: totalPages }, totalPages)
                ];
            }
            else {
                // Active page is greater than total page - 4
                return [
                    _jsx(PageButton, { pageNumber: 1 }, 1),
                    _jsx(Ellipsis, {}, "end"),
                    ...Array.from({ length: 5 }, (_, i) => totalPages - 4 + i).map((i) => (_jsx(PageButton, { pageNumber: i }, i)))
                ];
            }
        }
    }, [totalPages, activePgNo, variant, handleClick]);
    return (_jsxs("div", Object.assign({ ref: ref, className: cn(paginationVariants({ layout }), className) }, props, { children: [_jsx(Button, { size: "sm", prefixIcon: iconList.leftArrowLong, color: variant === "filled" ? "primary" : "secondary", variant: variant, className: "rtl:rotate-180", onClick: () => handleClick(activePgNo - 1), disabled: activePgNo === 1, "aria-label": "Previous Page", "aria-disabled": activePgNo === 1, children: showLabels ? "Previous" : null }), _jsxs("div", { className: cn(paginationPageContainerVariants()), children: [layout === "detailed" && renderPageNumbers, layout === "basic" && (_jsxs("div", { className: cn(paginationTextVariants()), "aria-live": "polite", children: ["Page ", activePgNo, " of ", totalPages] }))] }), _jsx(Button, { size: "sm", prefixIcon: iconList.rightArrowLong, color: variant === "filled" ? "primary" : "secondary", variant: variant, className: "rtl:rotate-180", onClick: () => handleClick(activePgNo + 1), disabled: activePgNo === totalPages, "aria-label": "Next Page", "aria-disabled": activePgNo === totalPages, children: showLabels ? "Next" : null })] })));
});
Pagination.displayName = "Pagination";
//# sourceMappingURL=pagination.js.map