import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
import BasicFormModal from "../FormModal/BasicFormModal";
import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useEffect, useState, } from "react";
const Pagination = (props) => {
    const isHasMoreMode = props.hasMore !== undefined;
    const [minPageNumber, setMinPageNumber] = useState(1);
    const [maxPageNumber, setMaxPageNumber] = useState(1);
    const setMinAndMaxPageNumber = () => {
        setMinPageNumber(1);
        let maxPageNo = props.totalItemsCount % props.itemsOnPage === 0
            ? props.totalItemsCount / props.itemsOnPage + 1
            : props.totalItemsCount / props.itemsOnPage;
        if (maxPageNo < 1) {
            maxPageNo = 1;
        }
        setMaxPageNumber(Math.ceil(maxPageNo));
    };
    useEffect(() => {
        setMinAndMaxPageNumber();
    }, []);
    useEffect(() => {
        setMinAndMaxPageNumber();
    }, [props.totalItemsCount, props.itemsOnPage]);
    const isPreviousDisabled = props.currentPageNumber === 1 || props.isLoading || props.isError;
    const isNextDisabled = isHasMoreMode
        ? !props.hasMore || props.isLoading || props.isError
        : props.currentPageNumber * props.itemsOnPage >= props.totalItemsCount ||
            props.isLoading ||
            props.isError;
    const isCurrentPageButtonDisabled = isHasMoreMode
        ? props.isLoading || props.isError
        : props.totalItemsCount === 0 || props.isLoading || props.isError;
    const [showPaginationModel, setShowPaginationModel] = useState(false);
    return (React.createElement("nav", { className: "flex items-center justify-between border-t border-gray-200 bg-white px-4", "data-testid": props.dataTestId, "aria-label": `Pagination for ${props.pluralLabel}` },
        React.createElement("div", { className: "hidden md:block" },
            React.createElement("p", { className: "text-sm text-gray-500" },
                !props.isLoading && isHasMoreMode && (React.createElement("span", null, `Showing ${props.itemsOnPage * (props.currentPageNumber - 1) + 1} to ${props.itemsOnPage * (props.currentPageNumber - 1) +
                    Math.max(props.totalItemsCount -
                        props.itemsOnPage * (props.currentPageNumber - 1), 0)}${props.hasMore ? "+" : ""} ${props.pluralLabel.toLowerCase()}.`)),
                !props.isLoading && !isHasMoreMode && (React.createElement("span", null,
                    props.totalItemsCount.toLocaleString(),
                    " ",
                    props.totalItemsCount > 1
                        ? props.pluralLabel
                        : props.singularLabel,
                    " ",
                    `in total. Showing ${props.itemsOnPage * (props.currentPageNumber - 1) + 1} to ${props.itemsOnPage * props.currentPageNumber} on this page.`)))),
        React.createElement("div", { className: "hidden md:flex" },
            React.createElement("div", { className: "inline-flex -space-x-px rounded-md shadow-sm" },
                React.createElement("div", { className: "my-2" },
                    React.createElement(Button, { dataTestId: "show-pagination-modal-button", className: "mx-2 my-2", buttonSize: ButtonSize.ExtraSmall, icon: IconProp.AdjustmentHorizontal, buttonStyle: ButtonStyleType.ICON_LIGHT, ariaLabel: "Open pagination settings", onClick: () => {
                            setShowPaginationModel(true);
                        } })),
                React.createElement("ul", { className: "py-3", role: "list" },
                    React.createElement("li", { role: "button", tabIndex: isPreviousDisabled ? -1 : 0, "aria-disabled": isPreviousDisabled, "aria-label": "Go to previous page", onClick: () => {
                            let currentPageNumber = props.currentPageNumber;
                            if (typeof currentPageNumber === "string") {
                                currentPageNumber = parseInt(currentPageNumber);
                            }
                            if (props.onNavigateToPage && !isPreviousDisabled) {
                                props.onNavigateToPage(currentPageNumber - 1, props.itemsOnPage);
                            }
                        }, onKeyDown: (e) => {
                            if ((e.key === "Enter" || e.key === " ") &&
                                !isPreviousDisabled) {
                                e.preventDefault();
                                let currentPageNumber = props.currentPageNumber;
                                if (typeof currentPageNumber === "string") {
                                    currentPageNumber = parseInt(currentPageNumber);
                                }
                                if (props.onNavigateToPage) {
                                    props.onNavigateToPage(currentPageNumber - 1, props.itemsOnPage);
                                }
                            }
                        }, className: ` inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500   ${isPreviousDisabled
                            ? "bg-gray-100"
                            : "hover:bg-gray-50 cursor-pointer"}` },
                        React.createElement("span", { className: "page-link" }, "Previous")),
                    React.createElement("li", { role: "button", tabIndex: isCurrentPageButtonDisabled ? -1 : 0, "aria-current": "page", "aria-label": `Page ${props.currentPageNumber}, click to change page`, "data-testid": "current-page-link", className: ` z-10 inline-flex items-center border border-x-0 border-gray-300 hover:bg-gray-50 px-4 py-2 text-sm font-medium text-text-600  cursor-pointer ${isCurrentPageButtonDisabled ? "bg-gray-100" : ""}`, onClick: () => {
                            if (!isHasMoreMode) {
                                setShowPaginationModel(true);
                            }
                        }, onKeyDown: (e) => {
                            if ((e.key === "Enter" || e.key === " ") && !isHasMoreMode) {
                                e.preventDefault();
                                setShowPaginationModel(true);
                            }
                        } },
                        React.createElement("span", null, props.currentPageNumber)),
                    React.createElement("li", { role: "button", tabIndex: isNextDisabled ? -1 : 0, "aria-disabled": isNextDisabled, "aria-label": "Go to next page", onClick: () => {
                            let currentPageNumber = props.currentPageNumber;
                            if (typeof currentPageNumber === "string") {
                                currentPageNumber = parseInt(currentPageNumber);
                            }
                            if (props.onNavigateToPage && !isNextDisabled) {
                                props.onNavigateToPage(currentPageNumber + 1, props.itemsOnPage);
                            }
                        }, onKeyDown: (e) => {
                            if ((e.key === "Enter" || e.key === " ") && !isNextDisabled) {
                                e.preventDefault();
                                let currentPageNumber = props.currentPageNumber;
                                if (typeof currentPageNumber === "string") {
                                    currentPageNumber = parseInt(currentPageNumber);
                                }
                                if (props.onNavigateToPage) {
                                    props.onNavigateToPage(currentPageNumber + 1, props.itemsOnPage);
                                }
                            }
                        }, className: ` inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500  ${isNextDisabled
                            ? "bg-gray-100"
                            : " hover:bg-gray-50 cursor-pointer"}` },
                        React.createElement("span", null, "Next"))))),
        React.createElement("div", { className: "md:hidden my-2" },
            React.createElement(Button, { dataTestId: "show-pagination-modal-button-mobile", className: "my-2", buttonSize: ButtonSize.ExtraSmall, icon: IconProp.AdjustmentHorizontal, buttonStyle: ButtonStyleType.ICON_LIGHT, ariaLabel: "Open pagination settings", onClick: () => {
                    setShowPaginationModel(true);
                } })),
        React.createElement("div", { className: "md:hidden" },
            React.createElement("div", { className: "inline-flex -space-x-px rounded-md shadow-sm" },
                React.createElement("ul", { role: "list" },
                    React.createElement("li", { role: "button", tabIndex: isPreviousDisabled ? -1 : 0, "aria-disabled": isPreviousDisabled, "aria-label": "Go to previous page", onClick: () => {
                            let currentPageNumber = props.currentPageNumber;
                            if (typeof currentPageNumber === "string") {
                                currentPageNumber = parseInt(currentPageNumber);
                            }
                            if (props.onNavigateToPage && !isPreviousDisabled) {
                                props.onNavigateToPage(currentPageNumber - 1, props.itemsOnPage);
                            }
                        }, onKeyDown: (e) => {
                            if ((e.key === "Enter" || e.key === " ") &&
                                !isPreviousDisabled) {
                                e.preventDefault();
                                let currentPageNumber = props.currentPageNumber;
                                if (typeof currentPageNumber === "string") {
                                    currentPageNumber = parseInt(currentPageNumber);
                                }
                                if (props.onNavigateToPage) {
                                    props.onNavigateToPage(currentPageNumber - 1, props.itemsOnPage);
                                }
                            }
                        }, className: ` inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500   ${isPreviousDisabled
                            ? "bg-gray-100"
                            : "hover:bg-gray-50 cursor-pointer"}` },
                        React.createElement("span", { className: "page-link" }, "Previous")),
                    React.createElement("li", { role: "button", tabIndex: isCurrentPageButtonDisabled ? -1 : 0, "aria-current": "page", "aria-label": `Page ${props.currentPageNumber}, click to change page`, "data-testid": "current-page-link-mobile", className: ` z-10 inline-flex items-center border border-x-0 border-gray-300 hover:bg-gray-50 px-4 py-2 text-sm font-medium text-text-600  cursor-pointer ${isCurrentPageButtonDisabled ? "bg-gray-100" : ""}`, onClick: () => {
                            if (!isHasMoreMode) {
                                setShowPaginationModel(true);
                            }
                        }, onKeyDown: (e) => {
                            if ((e.key === "Enter" || e.key === " ") && !isHasMoreMode) {
                                e.preventDefault();
                                setShowPaginationModel(true);
                            }
                        } },
                        React.createElement("span", null, props.currentPageNumber)),
                    React.createElement("li", { role: "button", tabIndex: isNextDisabled ? -1 : 0, "aria-disabled": isNextDisabled, "aria-label": "Go to next page", onClick: () => {
                            let currentPageNumber = props.currentPageNumber;
                            if (typeof currentPageNumber === "string") {
                                currentPageNumber = parseInt(currentPageNumber);
                            }
                            if (props.onNavigateToPage && !isNextDisabled) {
                                props.onNavigateToPage(currentPageNumber + 1, props.itemsOnPage);
                            }
                        }, onKeyDown: (e) => {
                            if ((e.key === "Enter" || e.key === " ") && !isNextDisabled) {
                                e.preventDefault();
                                let currentPageNumber = props.currentPageNumber;
                                if (typeof currentPageNumber === "string") {
                                    currentPageNumber = parseInt(currentPageNumber);
                                }
                                if (props.onNavigateToPage) {
                                    props.onNavigateToPage(currentPageNumber + 1, props.itemsOnPage);
                                }
                            }
                        }, className: ` inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500  ${isNextDisabled
                            ? "bg-gray-100"
                            : " hover:bg-gray-50 cursor-pointer"}` },
                        React.createElement("span", null, "Next"))))),
        showPaginationModel && (React.createElement(BasicFormModal, { "data-testid": "pagination-modal", title: isHasMoreMode ? "Items on Page" : "Navigate to Page", onClose: () => {
                setShowPaginationModel(false);
            }, submitButtonText: isHasMoreMode ? "Apply" : "Go to Page", onSubmit: (item) => {
                if (props.onNavigateToPage) {
                    /*
                     * hasMore mode doesn't know the max page, so the
                     * pageNumber field is hidden — navigating "in place"
                     * keeps the current page and only changes the page
                     * size.
                     */
                    const pageNumber = isHasMoreMode
                        ? props.currentPageNumber
                        : item.pageNumber;
                    props.onNavigateToPage(pageNumber, item.itemsOnPage);
                }
                setShowPaginationModel(false);
            }, formProps: {
                initialValues: {
                    pageNumber: props.currentPageNumber,
                    itemsOnPage: props.itemsOnPage,
                },
                fields: [
                    ...(isHasMoreMode
                        ? []
                        : [
                            {
                                title: "Page Number",
                                description: `You can enter page numbers from ${minPageNumber !== maxPageNumber
                                    ? minPageNumber + " to " + maxPageNumber
                                    : minPageNumber}. Please enter it here:`,
                                field: {
                                    pageNumber: true,
                                },
                                disabled: minPageNumber === maxPageNumber,
                                placeholder: "1",
                                required: true,
                                validation: {
                                    minValue: minPageNumber,
                                    maxValue: maxPageNumber,
                                },
                                fieldType: FormFieldSchemaType.PositiveNumber,
                            },
                        ]),
                    {
                        title: `${props.pluralLabel} on Page `,
                        description: `Enter the number of ${props.pluralLabel.toLowerCase()} you would like to see on the page:`,
                        field: {
                            itemsOnPage: true,
                        },
                        placeholder: "10",
                        required: true,
                        fieldType: FormFieldSchemaType.Dropdown,
                        dropdownOptions: [
                            {
                                value: 10,
                                label: "10",
                            },
                            {
                                value: 20,
                                label: "20",
                            },
                            {
                                value: 25,
                                label: "25",
                            },
                            {
                                value: 50,
                                label: "50",
                            },
                        ],
                    },
                ],
            } }))));
};
export default Pagination;
//# sourceMappingURL=Pagination.js.map