import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import SwiperCore, { A11y, Autoplay, Pagination } from 'swiper/swiper.esm.js';
import { Swiper, SwiperSlide } from 'swiper/swiper-react.esm.js';
import Anchor from "../../components/Anchor/Anchor.js";
import AnimateBlock from "../../components/AnimateBlock/AnimateBlock.js";
import Title from "../../components/Title/Title.js";
import { block } from "../../utils/index.js";
import Arrow from "./Arrow/Arrow.js";
import { i18n } from "./i18n/index.js";
import { useSlider } from "./useSlider.js";
import { useSliderPagination } from "./useSliderPagination.js";
import './Slider.css';
import 'swiper/swiper-bundle.css';
const b = block('SliderNewBlock');
SwiperCore.use([Autoplay, A11y, Pagination]);
function getDisclaimerSize(size) {
    if (!size) {
        return 'm';
    }
    if (size === 'sm') {
        return 'm';
    }
    return size;
}
export const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, dots = true, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, onPrev, onNext, setIsLocked } = useSlider({
        slidesToShow,
        children,
        type,
        autoplayMs,
    });
    const isA11yControlHidden = Boolean(autoplay);
    const controlTabIndex = isA11yControlHidden ? -1 : 0;
    const paginationProps = useSliderPagination({
        enabled: dots,
        isA11yControlHidden,
        controlTabIndex,
        bulletClass: b('dot', dotsClassName),
        bulletActiveClass: b('dot_active'),
        paginationLabel: i18n('pagination-label'),
    });
    return (_jsxs("div", { className: b({
            'one-slide': childrenCount === 1,
            'only-arrows': !title?.text && !description && arrows,
            'without-dots': !dots || isLocked,
            type,
        }, blockClassName), children: [anchorId && _jsx(Anchor, { id: anchorId }), _jsx(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }), _jsxs(AnimateBlock, { className: b('animate-slides'), animate: animated, children: [_jsx(Swiper, { className: b('slider', className), onSwiper: onSwiper, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: 0, noSwiping: false, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), watchSlidesVisibility: true, watchOverflow: true, a11y: {
                            slideLabelMessage: '',
                            paginationBulletMessage: i18n('dot-label', { index: '{{index}}' }),
                        }, ...paginationProps, children: React.Children.map(children, (elem, index) => (_jsx(SwiperSlide, { className: b('slide'), children: ({ isVisible }) => (_jsx("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible, children: elem })) }, index))) }), arrows && !isLocked && (_jsx(React.Fragment, { children: _jsxs("div", { "aria-hidden": isA11yControlHidden, children: [_jsx(Arrow, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }), _jsx(Arrow, { className: b('arrow', { next: true }), type: "right", onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })] }) })), _jsx("div", { className: b('footer'), children: disclaimer ? (_jsx("div", { className: b('disclaimer', {
                                size: getDisclaimerSize(disclaimer?.size),
                            }), children: disclaimer?.text })) : null })] })] }));
};
export default SliderNewBlock;
//# sourceMappingURL=Slider.js.map
