import Swiper, { Pagination, Autoplay, Parallax, EffectFade } from 'swiper';
import 'swiper/css/autoplay';

const textPagination = [
    'Quadcode SaaS Receives UF AWARD for Best All-in-One Brokerage Solution',
];

const breakpoint = window.matchMedia('(min-width: 1200px)');

export const swiperInfo = new Swiper('.slider-info__swiper', {
    modules: [Pagination, Autoplay, Parallax, EffectFade],
    effect: 'fade',
    init: false,
    fadeEffect: {
        crossFade: true
    },
    speed: 1200,
    parallax: true,
    slidesPerView: 1,
    autoplay: {
        delay: 4500,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.pagination',
        clickable: true,
        type: 'bullets',
        bulletClass: 'pagination__item',
        bulletActiveClass: 'pagination__item_active',
        renderBullet: function (index) {
            return `
            <div class="pagination__item">
                <div class="pagination__progress">
                    <span class="pagination__progress-span"></span>
                </div>
                <div class="pagination__text defaultSmall">${textPagination[index]}</div>
            </div>`;
        },
    },
    loop: textPagination.length > 1,
    allowTouchMove: !breakpoint.matches
});
swiperInfo.on('init', () => {
    swiperInfo.on('slideChange', () => {
        const pagination = document.querySelector('.pagination');

        if (!pagination) return

        const itemPagination = pagination.querySelectorAll('.pagination__item');
        removeActive(itemPagination);

        for (let i = 0; i <= itemPagination.length; i++) {
            if (swiperInfo.realIndex === i) {
                if (!itemPagination[i]) return;
                itemPagination[i].classList.add('pagination__item_active');
            }
        }
    })

    const removeActive = (items) => {
        items.forEach(item => {
            if (!item) return;

            item.classList.remove('pagination__item_active');
        })
    }
})