import React, { useState, useCallback, useEffect } from 'react';
import { useMultiStyleConfig, Box } from '@chakra-ui/react';
import Flex from '../flex/index.js';
import ThumbnailNavigationButton from './ThumbnailNavigationButton.js';
import Thumbnail from './Thumbnail.js';

var ThumbnailPagination = function (_a) {
    var currentSlideIndex = _a.currentSlideIndex, thumbnails = _a.thumbnails, mainCarousel = _a.mainCarousel, paginationCarouselRef = _a.paginationCarouselRef, paginationCarousel = _a.paginationCarousel;
    var _b = useState({ previous: false, next: true }), paginationButtonVisibility = _b[0], setPaginationButtonVisibility = _b[1];
    var pagination = useMultiStyleConfig('Carousel', {
        variant: 'fullScreen',
    }).pagination;
    var scrollPrev = useCallback(function () { return paginationCarousel && paginationCarousel.scrollPrev(true); }, [paginationCarousel]);
    var scrollNext = useCallback(function () { return paginationCarousel && paginationCarousel.scrollNext(true); }, [paginationCarousel]);
    var onThumbnailClick = useCallback(function (index) {
        if (!mainCarousel || !paginationCarousel)
            return;
        mainCarousel.scrollTo(index, true);
    }, [mainCarousel, paginationCarousel]);
    var evalPaginationButtonVisibility = useCallback(function () {
        if (!paginationCarousel ||
            paginationCarousel.slidesNotInView().length === 0) {
            setPaginationButtonVisibility({ previous: false, next: false });
            return;
        }
        var progress = Math.max(0, Math.min(1, paginationCarousel.scrollProgress()));
        var slideWidth = 1 / thumbnails.length;
        setPaginationButtonVisibility({
            previous: progress > slideWidth,
            next: progress < 1 - slideWidth,
        });
    }, [paginationCarousel, thumbnails.length]);
    useEffect(function () {
        if (!paginationCarousel)
            return;
        evalPaginationButtonVisibility();
        paginationCarousel.on('scroll', evalPaginationButtonVisibility);
        paginationCarousel.on('slidesInView', evalPaginationButtonVisibility);
    }, [paginationCarousel, evalPaginationButtonVisibility]);
    return (React.createElement(Box, { ref: paginationCarouselRef, __css: pagination, "aria-label": "Pagination" },
        React.createElement(Flex, { alignItems: "center", height: "full", id: "thumbnail-wrapper" }, thumbnails.map(function (slide, index) { return (React.createElement(Thumbnail, { key: "slide-".concat(index), onClick: function () { return onThumbnailClick(index); }, isCurrent: index === currentSlideIndex, thumbnailIndex: index, totalThumbnails: thumbnails.length }, paginationCarouselRef ? (slide) : (React.createElement(Box, { h: "full", w: "full", backgroundColor: "gray.50" })))); })),
        paginationButtonVisibility.previous ? (React.createElement(ThumbnailNavigationButton, { onClick: scrollPrev, direction: "previous" })) : null,
        paginationButtonVisibility.next ? (React.createElement(ThumbnailNavigationButton, { onClick: scrollNext, direction: "next" })) : null));
};

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