'use strict';

const gymSwiper = new Swiper('.gym-swiper', {
    direction: 'horizontal',
    breakpoints: {
        320:{
            slidesPerView: 1.20,
            spaceBetween: 24,
        },
        996: {
            slidesPerView: 3
        },
    }
});



const reviewsSwiper = new Swiper('.reviews-swiper', {
    spaceBetween: 24,
    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar',
    },
    runCallbacksOnInit: true,
    // === new change
    on: {
        slideChange: function(){
            let offer = document.querySelector('#numberReviews');
            offer.innerHTML = (this.activeIndex +  1);
        }
    }
})

// gymSwiper.destroy();

// how

function howPc() {
    let itemButtons = document.querySelectorAll('.how-control__item'),
        itemBlocks = document.querySelectorAll('.how-content__item-block');

    itemButtons.forEach((button, index) => {
        let block = itemBlocks[index];

        button.onclick = function () {
            let activeContent = document.querySelector('.how__content').querySelector('.active'),
                activeButton = document.querySelector('.how__control').querySelector('.active');
            
            activeContent.style.height = '0px';
            activeContent.classList.remove('active');
            activeButton.classList.remove('active');

            setTimeout(() => {
                let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px';
                block.style.height = newHeight;
                block.classList.add('active');
                button.classList.add('active');
            }, 300);
        }
    })
}

howPc();