"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SliderBlock = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
require("swiper/css");
require("swiper/css/a11y");
require("swiper/css/pagination");
const modules_1 = require("swiper/modules");
const react_1 = require("swiper/react");
const Anchor_1 = tslib_1.__importDefault(require("../../components/Anchor/Anchor.js"));
const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock.js"));
const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title.js"));
const grid_1 = require("../../gravity-blocks/grid/index.js");
const models_1 = require("../../models/index.js");
const utils_1 = require("../../utils/index.js");
const Arrow_1 = tslib_1.__importDefault(require("./Arrow/Arrow.js"));
const i18n_1 = require("./i18n/index.js");
const useSlider_1 = require("./useSlider.js");
const useSliderPagination_1 = require("./useSliderPagination.js");
const b = (0, utils_1.block)('SliderBlock');
const SliderBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, dots = true, initialSlide = 0, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, onPrev, onNext, setIsLocked } = (0, useSlider_1.useSlider)({
        slidesToShow,
        children,
        type,
        autoplayMs,
    });
    const isA11yControlHidden = Boolean(autoplay);
    const controlTabIndex = isA11yControlHidden ? -1 : 0;
    const paginationProps = (0, useSliderPagination_1.useSliderPagination)({
        enabled: dots,
        isA11yControlHidden,
        controlTabIndex,
        horizontalClass: b('dots'),
        bulletClass: b('dot', dotsClassName),
        bulletActiveClass: b('dot_active'),
        paginationLabel: (0, i18n_1.i18n)('pagination-label'),
    });
    return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)("div", { className: b({
                'one-slide': childrenCount === 1,
                'only-arrows': (!title || (typeof title !== 'string' && !title?.text)) &&
                    !description &&
                    arrows,
                'without-dots': !dots || isLocked,
                type,
            }, blockClassName), children: [anchorId && (0, jsx_runtime_1.jsx)(Anchor_1.default, { id: anchorId }), (0, jsx_runtime_1.jsx)(Title_1.default, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }), (0, jsx_runtime_1.jsxs)(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated, children: [(0, jsx_runtime_1.jsx)(react_1.Swiper, { modules: [modules_1.Autoplay, modules_1.A11y, modules_1.Pagination], className: b('slider', className), onSwiper: onSwiper, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), watchOverflow: true, watchSlidesProgress: true, touchStartPreventDefault: false, touchAngle: 45, threshold: 10, longSwipes: true, longSwipesRatio: 0.5, resistance: true, resistanceRatio: 0.5, a11y: {
                                slideLabelMessage: '',
                                paginationBulletMessage: (0, i18n_1.i18n)('dot-label', { index: '{{index}}' }),
                            }, ...paginationProps, children: React.Children.map(children, (elem, index) => ((0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { className: b('slide'), children: ({ isVisible }) => ((0, jsx_runtime_1.jsx)("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible, children: elem })) }, index))) }), arrows && !isLocked && ((0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { "aria-hidden": isA11yControlHidden, children: [(0, jsx_runtime_1.jsx)(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", transparent: type === models_1.SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", transparent: type === models_1.SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })] }) })), (0, jsx_runtime_1.jsx)("div", { className: b('footer'), children: disclaimer ? ((0, jsx_runtime_1.jsx)("div", { className: b('disclaimer', { size: disclaimer?.size || 'm' }), children: disclaimer?.text })) : null })] })] }) }));
};
exports.SliderBlock = SliderBlock;
exports.default = exports.SliderBlock;
//# sourceMappingURL=Slider.js.map
