import React, { useState, useCallback, useEffect } from 'react';
import useEmblaCarousel from 'embla-carousel-react';
import { useMediaQuery, useMultiStyleConfig, Box } from '@chakra-ui/react';
import '../../themes/index.js';
import Flex from '../flex/index.js';
import ThumbnailPagination from './ThumbnailPagination.js';
import Slide from './Slide.js';
import NumbersPagination from './NumbersPagination.js';
import NavigationButton from './NavigationButton.js';
import NumbersDotsPagination from './DotsPagination.js';
import { breakpoints } from '../../themes/shared/breakpoints.js';
import '../../themes/shared/index.js';

var PaginationType;
(function (PaginationType) {
    PaginationType["Thumbnail"] = "thumbnail";
    PaginationType["Number"] = "number";
    PaginationType["None"] = "none";
    PaginationType["Dot"] = "dot";
})(PaginationType || (PaginationType = {}));
// eslint-disable-next-line sonarjs/cognitive-complexity
var Carousel = function (props) {
    var _a;
    var _b;
    var _c = props.startIndex, startIndex = _c === void 0 ? 0 : _c, onSlideClick = props.onSlideClick, onSlideSelect = props.onSlideSelect, fullScreen = props.fullScreen, _d = props.paginationType, paginationType = _d === void 0 ? PaginationType.None : _d, _e = props.slidesPerView, slidesPerView = _e === void 0 ? 1 : _e, _f = props.loop, loop = _f === void 0 ? true : _f, _g = props.slidesToScroll, slidesToScroll = _g === void 0 ? 1 : _g;
    var _h = useState(loop), canScrollPrevious = _h[0], setCanScrollPrevious = _h[1];
    var _j = useState(loop), canScrollNext = _j[0], setCanScrollNext = _j[1];
    var _k = useState(startIndex), selectedIndex = _k[0], setSelectedIndex = _k[1];
    var isSmallLandscapeViewport = useMediaQuery("(max-height: ".concat(breakpoints.sm.px, "px) and (orientation: landscape)"), {
        ssr: true,
        fallback: false,
    })[0];
    var _l = useMultiStyleConfig('Carousel', fullScreen ? { variant: 'fullScreen' } : {}), container = _l.container, carousel = _l.carousel, slideContainer = _l.slideContainer;
    var _m = useEmblaCarousel({
        loop: loop,
        startIndex: startIndex,
        duration: 20,
        align: 'start',
        slidesToScroll: slidesToScroll,
    }), mainCarouselRef = _m[0], mainCarousel = _m[1];
    var _o = useEmblaCarousel({
        containScroll: 'keepSnaps',
        dragFree: true,
        slidesToScroll: 'auto',
        inViewThreshold: 1,
        duration: 20,
    }), paginationCarouselRef = _o[0], paginationCarousel = _o[1];
    var scrollPrev = useCallback(function () { return mainCarousel && mainCarousel.scrollPrev(true); }, [mainCarousel]);
    var scrollNext = useCallback(function () { return mainCarousel && mainCarousel.scrollNext(true); }, [mainCarousel]);
    var onClick = useCallback(function (index) {
        if (onSlideClick) {
            onSlideClick(index);
        }
    }, [onSlideClick]);
    var numberOfSlides = props.children.length;
    var hasThumbnailPagination = fullScreen && !isSmallLandscapeViewport;
    var onSelect = useCallback(function () {
        if (!mainCarousel)
            return;
        var newIndex = mainCarousel.selectedScrollSnap();
        var previousIndex = mainCarousel.previousScrollSnap();
        setSelectedIndex(newIndex);
        setCanScrollPrevious(mainCarousel.canScrollPrev());
        setCanScrollNext(mainCarousel.canScrollNext());
        if (paginationCarousel && hasThumbnailPagination) {
            var slideRegistry = paginationCarousel.internalEngine().slideRegistry;
            var snapIndexThatSlideBelongsTo = slideRegistry.findIndex(function (group) {
                return group.includes(newIndex);
            });
            if (typeof snapIndexThatSlideBelongsTo !== 'undefined') {
                paginationCarousel.scrollTo(snapIndexThatSlideBelongsTo);
            }
        }
        if (onSlideSelect) {
            onSlideSelect(newIndex);
        }
        if (!props.fullScreen) {
            return;
        }
        if (newIndex !== undefined) {
            var currentSlide = props.children[newIndex];
            if (currentSlide.onSlideEnter) {
                currentSlide.onSlideEnter();
            }
        }
        if (previousIndex !== undefined && previousIndex !== newIndex) {
            var previousSlide = props.children[previousIndex];
            if (previousSlide.onSlideLeave) {
                previousSlide.onSlideLeave();
            }
        }
    }, [
        mainCarousel,
        paginationCarousel,
        onSlideSelect,
        hasThumbnailPagination,
        props.children,
        props.fullScreen,
    ]);
    useEffect(function () {
        if (!mainCarousel)
            return;
        onSelect();
        mainCarousel.on('select', onSelect);
    }, [mainCarousel, onSelect]);
    useEffect(function () {
        var keydownListener = function (e) {
            if (fullScreen) {
                switch (e.code) {
                    case 'ArrowRight':
                        scrollNext();
                        break;
                    case 'ArrowLeft':
                        scrollPrev();
                        break;
                }
            }
        };
        document.addEventListener('keydown', keydownListener);
        return function () { return document.removeEventListener('keydown', keydownListener); };
    }, [fullScreen, scrollNext, scrollPrev]);
    var prerenderFallbackSlide = startIndex !== 0 && !mainCarouselRef;
    var carouselHeightByPaginationTypeMap = (_a = {},
        _a[PaginationType.None] = 'full',
        _a[PaginationType.Thumbnail] = 'calc(100% - 7.5rem)',
        _a[PaginationType.Number] = 'calc(100% - 5rem)',
        _a[PaginationType.Dot] = 'full',
        _a);
    return (React.createElement(Box, { __css: container },
        prerenderFallbackSlide ? (React.createElement(Slide, { slideIndex: startIndex, onClick: function () { return onClick(startIndex); }, totalSlides: numberOfSlides, isCurrent: startIndex === selectedIndex, fullScreen: !!fullScreen, slidesPerView: slidesPerView }, props.fullScreen
            ? (_b = props.children[startIndex]) === null || _b === void 0 ? void 0 : _b.slide
            : props.children[startIndex])) : (React.createElement(Box, { ref: mainCarouselRef, "aria-label": "Carousel", "aria-roledescription": "Carousel", role: "group", height: carouselHeightByPaginationTypeMap[hasThumbnailPagination ? PaginationType.Thumbnail : paginationType], __css: carousel },
            React.createElement(Flex, { __css: slideContainer, marginLeft: slidesPerView === 1 ? 0 : { base: '-md', md: '-2xl' } }, props.children.map(function (slide, index) { return (React.createElement(Slide, { key: "slide-".concat(index), slideIndex: index, onClick: function () { return onClick(index); }, totalSlides: numberOfSlides, isCurrent: index === selectedIndex, fullScreen: !!fullScreen, slidesPerView: slidesPerView }, slide && typeof slide === 'object' && 'slide' in slide
                ? slide.slide
                : slide)); })),
            canScrollPrevious ? (React.createElement(NavigationButton, { onClick: scrollPrev, direction: "previous", fullScreen: !!fullScreen })) : null,
            canScrollNext ? (React.createElement(NavigationButton, { onClick: scrollNext, direction: "next", fullScreen: !!fullScreen })) : null,
            paginationType === PaginationType.Dot ? (React.createElement(NumbersDotsPagination, { currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null)),
        hasThumbnailPagination ? (React.createElement(ThumbnailPagination, { currentSlideIndex: selectedIndex, thumbnails: props.children.map(function (slide) { return slide.thumbnail; }), mainCarousel: mainCarousel, paginationCarousel: paginationCarousel, paginationCarouselRef: paginationCarouselRef })) : null,
        paginationType === PaginationType.Number ? (React.createElement(NumbersPagination, { mainCarousel: mainCarousel, currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null));
};

export { PaginationType, Carousel as default };
//# sourceMappingURL=index.js.map
