'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,
    allowTouchMove: false,
    // 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);
        }
    }
})

let swiperReviews = document.querySelectorAll('.swiper-reviews-img');
let reviewsSwiperImgs = {};
swiperReviews.forEach((review, index) => {
    let newClass = `swiper-reviews-img-${index}`;
    review.classList.add(newClass);

    reviewsSwiperImgs[index] = new Swiper(`.${newClass}`, {
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + "</span>";
            },
        },
    });
})



const projectsSwiper = new Swiper('.projects-swiper', {
    direction: 'horizontal',
    breakpoints: {
        320:{
            slidesPerView: 1,
            spaceBetween: 24,
        },
        996: {
            slidesPerView: 10
        },
    },
    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },    
    runCallbacksOnInit: true,
    // === new change
    on: {
        slideChange: function(){
            let offer = document.querySelector('#numberProjects');
            offer.innerHTML = (this.activeIndex +  1);
        }
    }
});




// how
let itemButtons = document.querySelectorAll('.how-control__item');
itemButtons.forEach((button) => {
    let num = button.dataset.num;

    button.onclick = function name(params, index) {

        let activeContent = document.querySelector('.how-content__item-block.active'),
            activeButton = document.querySelector('.how-control__item.active');

        if (activeContent.dataset.num == button.dataset.num) return;
        
        activeContent.style.height = `${activeContent.offsetHeight}px`;
        
        setTimeout(() => {
            activeContent.style.height = '0px';
            activeContent.classList.remove('active');
            activeButton.classList.remove('active');

            let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
                newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
            

            setTimeout(() => {
                let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
                newActive.style.height = newHeight;
                newActive.classList.add('active');
                newButton.classList.add('active');

                setTimeout(() => {
                    newActive.style.height = 'auto';
                }, 300);
            }, 300);
        }, 0);
    }        
})

let screenWidth = window.screen.width;
if (screenWidth <= 992) {
    howPhone();
}else{
    howPc();
}

function howPc() {
    if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
        return;
    }

    let blocks =  document.querySelectorAll('.how-content__item-block'),
        content = document.querySelector('.how__content');

    blocks.forEach(block => {
        content.appendChild(block)
    });
}
function howPhone() {
    
    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {    
        return;
    }
    
    let buttons =  document.querySelectorAll('.how-control__item');

    buttons.forEach(button => {
        let num = button.dataset.num,
            block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
            
            button.after(block);
    });
}
// how end

// phone menu
addClosePhoneMenu('.phone-menu__content');
addClosePhoneMenu('.phone-menu__sub');

let btnOpenMenu = document.querySelector('.button-menu__open');
btnOpenMenu.onclick = function () {
    let block = document.querySelector('.phone-menu'),
        content = document.querySelector('.phone-menu__content'),
        contentHeight = content.offsetHeight + 'px';

    block.style.height = contentHeight;
}

let closeMenu = document.querySelector('.phone-menu-content__close');
closeMenu.onclick = function () {
    let block = document.querySelector('.phone-menu');

    block.style.height = '0px';
}

let phoneList = document.querySelectorAll('.phone-menu__list');
phoneList.forEach(list => {
    let elementList = list.querySelectorAll('li');

    elementList.forEach(element => {
        let nextList = element.querySelector('.phone-menu__sub');

        if (nextList) {
            let button = element.querySelector('a');

            button.onclick = function () {
                nextList.classList.add('open')           
            }
            
            nextList.querySelector('.phone-menu-content__close').onclick = function () {
                nextList.classList.remove('open')           
            }
            
        }
    })
})

function addClosePhoneMenu(classAdd) {
    document.querySelectorAll(classAdd).forEach(element => {
        let button = document.createElement('button');
        button.className = "phone-menu-content__close";

        let referenceElement = element.firstElementChild;

        element.insertBefore(button, referenceElement);
    })
    
}
// phone menu end

// search
let openBtnSearch = document.querySelector('.header-menu-search__open'),
    blockSearchPc = document.querySelector('.header-menu__search');

openBtnSearch.onclick = function () {
    blockSearchPc.classList.toggle('active');
}

let btnOpenSearchPhone = document.querySelector('.phone__open-search'),
    searchPhone = document.querySelector('.phone-search');

btnOpenSearchPhone.onclick = function () {
    if (!searchPhone.classList.contains('hidden')) {
        setTimeout(() => {
            searchPhone.classList.add('hidden');
        }, 300);
    }else{
        searchPhone.classList.remove('hidden');
    }

    btnOpenSearchPhone.classList.toggle('active');
    searchPhone.classList.toggle('active');
}

// pc
let inputSearchPc = document.querySelector('.header-menu-search__input'),
    btnSearchPc = document.querySelector('.header-menu-search__btn');

btnSearchPc.onclick = function () {
    let value = inputSearchPc.value,
        newPost = {
            value: value,
        };

    postSearch(newPost, 'pc');
}

// phone
let inputSearchPhone = document.querySelector('.phone-search__input');

inputSearchPhone.addEventListener('input', function(event) {
    let value = event.target.value,
        newPost = {
            value: value,
        };

    postSearch(newPost, 'phone');
});

function postSearch(newPost, device) {
    let contentPc = document.querySelector('.header-menu-search__found'),
        contentPhone = document.querySelector('.phone-search__found');

    fetch('http://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        // body: JSON.stringify(newPost),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      })
        .then((data) => {
            if (device == 'pc') {
                contentPc.innerHTML = '';

                contentPc.innerHTML = `<div class="header-menu-search__item">
                                    <img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">

                                    <div class="header-menu-search-item__content">
                                        <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
                                        <p class="header-menu-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
                                    </div>
                                </div>`;

                contentPc.classList.add('active');
            }else{
                contentPhone.innerHTML = '';

                contentPhone.innerHTML = `<div class="phone-search__item">
                            <img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
                        
                            <div class="phone-search-item__content">
                                <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
                                <p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
                            </div>
                        </div>`;

                contentPhone.classList.add('active');
            }
        }).catch(
            () => {
              if (device == 'pc') {
                postError(contentPc);
              }else{
                postError(contentPhone);
              }
            }
        )
}

function postError(divContent) {
    divContent.innerHTML = ''
                
    let p = document.createElement("p");
    p.textContent = "Произошла ошибка"
    p.className = "header-menu-search__error text-2";

    divContent.appendChild(p);
}


// search end

// open-modal

let openModals = document.querySelectorAll('.open-modal'),
    modal = document.querySelector('.modal');

openModals.forEach(openModal => {
    let modalName = openModal.dataset.modal;

    openModal.onclick = function () {
        let modalItem = document.querySelector(`.modal__item.${modalName}`);

        modalItem.classList.add('active');
        modal.classList.add('active');
    }
})

modal.onclick = function (event) {
    if (event.srcElement.classList.contains('modal')) {
        document.querySelector(`.modal__item.active`).classList.remove('active');
        modal.classList.remove('active');
    }
}

let itemModels = document.querySelectorAll('.modal__item');

itemModels.forEach(item => {
    let btnClose = item.querySelector('.modal-item__close');

    btnClose.onclick = function () {
        item.classList.remove('active');
        modal.classList.remove('active');
    }
})
// open-modal end

// masks

let phoneInputs = document.querySelectorAll('.input__field[type=phone]');

phoneInputs.forEach(phoneInput => {
    phoneInput.onfocus = function (event) {
        let value = phoneInput.value;

        if (value.length == 0) {
            phoneInput.value = '+7 '
        }
    }

    phoneInput.addEventListener('input', function(event) {
        let value = phoneInput.value,
            data = event.data,
            length = value.length;

        if (value.charAt(0) == '+' && length == 1) return;

        if (isNaN(data)) {
            phoneInput.value = value.slice(0, -1);
        }
    
        if (typeof data != 'object') {
            if (length == 2 || length == 6 || length == 10) {
                phoneInput.value = value + ' ';
            }
            if (length == 3 || length == 7 || length == 11) {
                if (data != ' ') {
                    phoneInput.value = value.slice(0, -1) + ' ' + data;
                }
            }
        }
        
        if (length <= 3) {
            phoneInput.value = '+7 '
        }
                
    });
})

// masks end

// pc menu

let listMenu = document.querySelectorAll('.header-menu__list > li');

listMenu.forEach(li => {
    if (li.querySelector('.header-menu-list__next')) {
        let nextButton = li.querySelector('.header-menu-list__next'),
            sub = li.querySelector('.header-menu-list__sub');

        nextButton.addEventListener('mouseover', function (event) {
            let openSubMenu = document.querySelector('.header-menu-list__sub.open');

            if (openSubMenu) {
                openSubMenu.classList.remove('open');
            }

            sub.classList.add('open');
        })

        sub.addEventListener('mouseout', function (event) {
            if (event.relatedTarget.offsetParent.tagName != 'UL') {
                sub.classList.remove('open');
            }
        })
    };
})

// pc menu end

// resize
window.addEventListener('resize', () => {
    let screenWidth = window.screen.width;
    
    if (screenWidth <= 992) {
        howPhone();
    }else{
        howPc();
    }
});