import { __spreadArray } from '../../node_modules/tslib/tslib.es6.js';
import React, { useMemo } from 'react';
import { useMultiStyleConfig, Box, Show } from '@chakra-ui/react';
import '../icons/AdvancedSearchIcon.js';
import '../icons/AiSearchIcon.js';
import '../icons/ArrowCircleIcon.js';
import '../icons/ArrowDiagonalIcon.js';
import '../icons/ArrowDownIcon.js';
import '../icons/ArrowLeftIcon.js';
import '../icons/ArrowRightIcon.js';
import '../icons/ArrowUpIcon.js';
import '../icons/AutoScout24AppLogo.js';
import '../icons/AvatarIcon.js';
import '../icons/AvatarWithNotificationIcon.js';
import '../icons/BatteryIcon.js';
import '../icons/BookmarkIcon.js';
import '../icons/CalculatorIcon.js';
import '../icons/CalendarIcon.js';
import '../icons/CallIcon.js';
import '../icons/CamperIcon.js';
import '../icons/CarConditionIcon.js';
import '../icons/CarIcon.js';
import '../icons/CopyIcon.js';
import '../icons/ChartIcon.js';
import '../icons/CheckmarkIcon.js';
import '../icons/CheckmarkCircleIcon.js';
import '../icons/CheckShieldIcon.js';
import '../icons/ChevronDownLargeIcon.js';
import '../icons/ChevronDownSmallIcon.js';
import '../icons/ChevronLeftLargeIcon.js';
import { ChevronLeftSmallIcon } from '../icons/ChevronLeftSmallIcon.js';
import '../icons/ChevronRightLargeIcon.js';
import { ChevronRightSmallIcon } from '../icons/ChevronRightSmallIcon.js';
import '../icons/ChevronRightTinyIcon.js';
import '../icons/ChevronUpLargeIcon.js';
import '../icons/ChevronUpSmallIcon.js';
import '../icons/CloseIcon.js';
import '../icons/CompareIcon.js';
import '../icons/ConsumptionIcon.js';
import '../icons/CreditIcon.js';
import '../icons/CreditCardIcon.js';
import '../icons/DaylightIcon.js';
import '../icons/DeleteIcon.js';
import '../icons/DocumentCheckIcon.js';
import '../icons/DocumentIcon.js';
import '../icons/DragIcon.js';
import '../icons/DriveSystemIcon.js';
import '../icons/DriveTypeIcon.js';
import '../icons/EquipmentIcon.js';
import '../icons/ErrorIcon.js';
import '../icons/ExchangeIcon.js';
import '../icons/EyeIcon.js';
import '../icons/EyeCrossedIcon.js';
import '../icons/FacebookIcon.js';
import '../icons/FlagIcon.js';
import '../icons/FlameIcon.js';
import '../icons/FlashIcon.js';
import '../icons/GasStationIcon.js';
import '../icons/HeartIcon.js';
import '../icons/HistoryClockIcon.js';
import '../icons/HouseIcon.js';
import '../icons/ImageIcon.js';
import '../icons/InfoIcon.js';
import '../icons/InstagramIcon.js';
import '../icons/InteriorIcon.js';
import '../icons/LinkedinIcon.js';
import '../icons/LinkIcon.js';
import '../icons/ListIcon.js';
import '../icons/LocationPinIcon.js';
import '../icons/MagnifierIcon.js';
import '../icons/MessageIcon.js';
import '../icons/MissingImageIcon.js';
import '../icons/MotorcycleIcon.js';
import '../icons/MotoScout24AppLogo.js';
import '../icons/PdfIcon.js';
import '../icons/PhoneIcon.js';
import '../icons/PenIcon.js';
import '../icons/PlusIcon.js';
import '../icons/ChfCurrencyIcon.js';
import '../icons/PrintIcon.js';
import '../icons/RangeIcon.js';
import '../icons/RoadIcon.js';
import '../icons/RotateIcon.js';
import '../icons/SafeNumberIcon.js';
import '../icons/ShareIcon.js';
import '../icons/StarIcon.js';
import '../icons/SteeringWheelIcon.js';
import '../icons/ThreeSixtyIcon.js';
import '../icons/TimeIcon.js';
import '../icons/TooltipIcon.js';
import '../icons/InformationIcon.js';
import '../icons/TopListingIcon.js';
import '../icons/TrailerIcon.js';
import '../icons/TransmissionIcon.js';
import '../icons/TransparentLockIcon.js';
import '../icons/Trash.js';
import '../icons/TruckIcon.js';
import '../icons/TwitterIcon.js';
import '../icons/UtilityVehicleIcon.js';
import '../icons/VehiclePowerIcon.js';
import '../icons/VehicleTypesMotorcycleIcon.js';
import '../icons/VideoIcon.js';
import '../icons/VideoCameraIcon.js';
import '../icons/ViewCarIcon.js';
import '../icons/DriveSystemLargeIcon.js';
import '../icons/WarningIcon.js';
import '../icons/WhatsAppIcon.js';
import '../icons/YoutubeIcon.js';
import '../icons/SortIcon.js';
import '../icons/ViewMotorcycleIcon.js';
import '../icons/GoogleIcon.js';
import '../icons/SaveSearchIcon.js';
import '../icons/AutoScout24Icon.js';
import '../icons/MotoScout24Icon.js';
import '../icons/MagnifierLargeIcon.js';
import '../icons/RocketIcon.js';
import '../icons/CartIcon.js';
import '../icons/VanIcon.js';
import '../icons/MiniVanIcon.js';
import '../icons/SuvIcon.js';
import '../icons/CoupeIcon.js';
import '../icons/CabrioletIcon.js';
import '../icons/SmallCarIcon.js';
import '../icons/SedanIcon.js';
import '../icons/WagonIcon.js';
import '../icons/PickUpIcon.js';
import '../icons/InformationBubbleIcon.js';
import '../icons/OverflowVerticalIcon.js';
import '../icons/PartialClockIcon.js';
import '../icons/LockIcon.js';
import '../icons/TiltedRectangleIcon.js';
import '../icons/PlusCircleIcon.js';
import '../icons/StarCircleIcon.js';
import '../icons/InfinityCircleIcon.js';
import '../icons/VehicleTypesMotorcycleStarIcon.js';
import '../icons/CategoryAOneIcon.js';
import '../icons/CategoryAIcon.js';
import '../icons/CategoryAMinusIcon.js';
import '../icons/BankNotesIcon.js';
import '../icons/ChatBubbleIcon.js';
import '../icons/DigitalContractIcon.js';
import '../icons/OptimizerIcon.js';
import '../icons/CheckmarkCircleColorIcon.js';
import '../icons/ArrowDownCircleIcon.js';
import '../icons/ArrowUpCircleIcon.js';
import '../icons/NotAvailableIcon.js';
import '../icons/LabelIcon.js';
import '../icons/BulbIcon.js';
import '../icons/NoPhotoIcon.js';
import '../icons/ThumbsUpIcon.js';
import '../icons/ThumbsDownIcon.js';
import '../icons/MinusIcon.js';
import '../icons/DoubleChevronUpIcon.js';
import '../icons/DoubleChevronDownIcon.js';
import '../icons/DoubleLineIcon.js';
import '../icons/NotAvailableSquareIcon.js';
import '../icons/WarrantyIcon.js';
import '../icons/DownloadIcon.js';
import '../icons/TriangleIcon.js';
import '../icons/SwissFlagIcon.js';
import '../icons/GlobeIcon.js';
import '../icons/GarageIcon.js';
import '../icons/HamburgerMenuIcon.js';
import '../icons/LogoutIcon.js';
import '../icons/AndroidIcon.js';
import '../icons/AppleIcon.js';
import '../icons/WindowsIcon.js';
import '../icons/SpeakerIcon.js';
import '../icons/AddPhotoIcon.js';
import '../icons/ScreenIcon.js';
import '../icons/QualitySealIcon.js';
import '../icons/ExpandIcon.js';
import '../icons/CollapseIcon.js';
import '../icons/ForwardIcon.js';
import '../icons/BalanceIcon.js';
import '../icons/ParagraphIcon.js';
import '../icons/UploadIcon.js';
import PaginationButton from './PaginationButton.js';

var Dots = '...';
var siblingCount = 1;
var range = function (start, end) {
    var length = end - start + 1;
    return Array.from({ length: length }, function (_, idx) { return idx + start; });
};
var Pagination = function (props) {
    var onChange = props.onChange, totalPages = props.totalPages, _a = props.currentPage, currentPage = _a === void 0 ? 0 : _a, marginTop = props.marginTop, marginBottom = props.marginBottom;
    var _b = useMultiStyleConfig('Pagination'), paginationContainer = _b.paginationContainer, dots = _b.dots;
    var paginationRange = useMemo(function () {
        // Default number of page buttons: firstPage + lastPage + currentPage + left side dots + right side dots
        var pageButtonsCount = 5;
        var totalPageButtonsCount = siblingCount * 2 + pageButtonsCount;
        if (totalPageButtonsCount >= totalPages) {
            return range(0, totalPages - 1);
        }
        var leftSiblingIndex = Math.max(currentPage - siblingCount, 0);
        var rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - 1);
        var shouldShowLeftDots = leftSiblingIndex > 2;
        var shouldShowRightDots = rightSiblingIndex < totalPages - 3;
        var firstPageNumber = 0;
        var lastPageNumber = totalPages - 1;
        // Show dots on right side
        if (!shouldShowLeftDots && shouldShowRightDots) {
            var leftItemCount = 3 + 2 * siblingCount;
            var leftRange = range(0, leftItemCount - 1);
            return __spreadArray(__spreadArray([], leftRange, true), [Dots, lastPageNumber], false);
        }
        // Show dots on left side
        if (shouldShowLeftDots && !shouldShowRightDots) {
            var rightItemCount = 3 + 2 * siblingCount;
            var rightRange = range(totalPages - rightItemCount, totalPages - 1);
            return __spreadArray([firstPageNumber, Dots], rightRange, true);
        }
        // Show dots on both sides
        if (shouldShowLeftDots && shouldShowRightDots) {
            var middleRange = range(leftSiblingIndex, rightSiblingIndex);
            return __spreadArray(__spreadArray([firstPageNumber, Dots], middleRange, true), [Dots, lastPageNumber], false);
        }
        return [];
    }, [totalPages, currentPage]);
    if (paginationRange.length < 2) {
        return null;
    }
    var onNext = function (e) {
        e.preventDefault();
        onChange(currentPage + 1);
    };
    var onPrevious = function (e) {
        e.preventDefault();
        onChange(currentPage - 1);
    };
    var isFirstPage = currentPage === 0;
    var isLastPage = currentPage === paginationRange[paginationRange.length - 1];
    var pageNumberToDispaly = function (pageNumber) {
        if (pageNumber === totalPages) {
            return pageNumber;
        }
        return pageNumber + 1;
    };
    return (React.createElement(Box, { marginTop: marginTop, marginBottom: marginBottom, __css: paginationContainer },
        React.createElement(Show, { above: "xs" },
            React.createElement(PaginationButton, { isDisabled: isFirstPage, onClick: onPrevious, ariaLabel: "previous page" },
                React.createElement(ChevronLeftSmallIcon, { color: isFirstPage ? 'gray.300' : 'gray.900' }))),
        paginationRange.map(function (pageNumber, index) {
            if (pageNumber === Dots) {
                return (React.createElement(Box, { __css: dots, key: "paginationDots-".concat(index), "aria-label": index === 1 ? 'left side dots' : 'right side dots' }, "\u2026"));
            }
            return (React.createElement(PaginationButton, { key: "paginationButton-".concat(index), isActive: pageNumber === currentPage, ariaLabel: "go to page ".concat(pageNumberToDispaly(Number(pageNumber)), " of ").concat(totalPages), onClick: function (e) {
                    e.preventDefault();
                    onChange(Number(pageNumber));
                } }, pageNumberToDispaly(Number(pageNumber))));
        }),
        React.createElement(Show, { above: "xs" },
            React.createElement(PaginationButton, { isDisabled: isLastPage, onClick: onNext, ariaLabel: "next page" },
                React.createElement(ChevronRightSmallIcon, { color: isLastPage ? 'gray.300' : 'gray.900' })))));
};

export { Pagination as default };
//# sourceMappingURL=index.js.map
