document.addEventListener('DOMContentLoaded', () => {
    const block = document.querySelector('.header');
    const burgerButton = block.querySelector('.header__burger')
    const headerLinks = block.querySelectorAll('a');

    burgerButton.addEventListener('click', () => {
        block.classList.toggle('header--open')
    })

    headerLinks.forEach(link => link.addEventListener('click', () => block.classList.remove('header--open')))

    document.addEventListener('click', ({target}) => {
        !block.contains(target) && block.classList.remove('header--open')
    })
})

document.addEventListener('DOMContentLoaded', () => {
    const tabs = [...document.querySelectorAll(`[data-tab]`)].reverse();
    const contents = [...document.querySelectorAll(`[data-content]`)];
    const tabsContainer = document.querySelector(`.tab-slider__header`);
    const container = document.querySelector(`.tab-slider__container`);

    const closeAll = () => {
        contents.forEach((content) => content.removeAttribute('data-tab-active'));
        tabs.forEach((tab) => tab.removeAttribute('data-tab-active'));
    };

    const toggleTab = (tabName) => {
        const matchingContents = contents.filter(content => content.getAttribute('data-content') === tabName);
        const matchingTabs = tabs.filter(tab => tab.getAttribute('data-tab') === tabName);

        const isActive = matchingContents.some(content => content.hasAttribute('data-tab-active'));

        if (window.matchMedia('(max-width: 1023px)').matches) {
            // Для аккордеона
            if (isActive) {
                closeAll(); // Закрываем, если уже открыто
            } else {
                closeAll(); // Закрываем все, а затем открываем текущее
                matchingContents.forEach(content => content.setAttribute('data-tab-active', ''));
                matchingTabs.forEach(tab => tab.setAttribute('data-tab-active', ''));
                console.log(matchingTabs)
            }
        } else {
            // Для обычных табов
            closeAll(); // Закрываем все
            matchingContents.forEach(content => content.setAttribute('data-tab-active', ''));
            matchingTabs.forEach(tab => tab.setAttribute('data-tab-active', ''));
        }
    };

    tabs.forEach((tab) => {
        tab.addEventListener('click', () => {
            const tabName = tab.getAttribute('data-tab');
            toggleTab(tabName);
        });
    });

    function handleResize() {
        const mediaQuery = window.matchMedia('(max-width: 767px)').matches;
        const mainTabs = tabs

        if (mediaQuery) {
            // Перемещаем контент под каждый таб
            contents.toReversed().forEach((content, idx) => {
                if (!content.parentNode.isEqualNode(tabsContainer)) {
                    tabsContainer.appendChild(content);
                }
                mainTabs[idx].insertAdjacentElement('afterend', content);
            });
        } else {
            // Возвращаем контент обратно в основной контейнер
            contents.forEach((content) => {
                if (!content.parentNode.isEqualNode(container)) {
                    container.appendChild(content);
                }
            });
        }
    }

    function setAccordionBehaviour() {
        const mediaQuery = window.matchMedia('(max-width: 1023px)').matches
        tabs.forEach((tab, idx) => {
            if (mediaQuery) {
                tab.addEventListener('click', () => {
                    if (window.matchMedia("(max-width: 1023px)").matches) {
                        window.scrollTo({ top: tab.getBoundingClientRect().top - 40, behavior: 'smooth' })
                    }
                })
            }
        })
    }

    setAccordionBehaviour()
    handleResize()
    window.addEventListener('resize', handleResize)
});

document.addEventListener('DOMContentLoaded', () => {
    const block = document.querySelector('.sales-slider');
    const wrapper = block.querySelector('.swiper-wrapper');
    const prevBtn = block.querySelector(`[data-id="prev"]`);
    const nextBtn = block.querySelector(`[data-id="next"]`);
    const pagination = block.querySelector('.sales-slider__pagination');
    const slides = Array.from(block.querySelectorAll('.swiper-slide'));

    let slideIndex = 0;
    let mySwiper = null;

    /**
     * Функция для обновления классов слайдов
     */
    const updateSlides = () => {
        slides.forEach((slide, index) => {
            slide.classList.remove('main-slide', 'secondary-slide', 'hidden-slide');

            if (index === slideIndex) {
                slide.classList.add('main-slide');
            } else if (
                index === (slideIndex + 1) % slides.length ||
                index === (slideIndex + 2) % slides.length
            ) {
                slide.classList.add('secondary-slide');
            } else {
                slide.classList.add('hidden-slide');
            }
        });

        updatePagination();
    };

    /**
     * Функция для перехода к следующему слайду
     */
    const nextSlide = () => {
        slideIndex = (slideIndex + 1) % slides.length;
        updateSlides();
    };

    /**
     * Функция для перехода к предыдущему слайду
     */
    const prevSlide = () => {
        slideIndex = (slideIndex - 1 + slides.length) % slides.length;
        updateSlides();
    };

    /**
     * Функция для обновления пагинации
     */
    const updatePagination = () => {
        if (!pagination) return;

        pagination.innerHTML = '';
        slides.forEach((_, index) => {
            const bullet = document.createElement('span');
            bullet.className = 'swiper-pagination-bullet';
            if (index === slideIndex) {
                bullet.classList.add('swiper-pagination-bullet-active');
            }
            bullet.addEventListener('click', () => {
                slideIndex = index;
                updateSlides();
            });
            pagination.appendChild(bullet);
        });
    };

    /**
     * Инициализация Swiper
     */
    const initializeSwiper = () => {
        if (!mySwiper) {
            mySwiper = new Swiper('.swiper', {
                loop: true,
                effect: "fade",
                slidesPerView: 1,
                spaceBetween: 20,
                pagination: {
                    el: pagination,
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '">' + '</span>';
                    },
                },
                navigation: {
                    nextEl: nextBtn,
                    prevEl: prevBtn,
                },
            });
        }
    };

    /**
     * Уничтожение Swiper
     */
    const destroySwiper = () => {
        if (mySwiper) {
            mySwiper.destroy(true, true);
            mySwiper = null;
        }
    };

    /**
     * Инициализация самописного слайдера
     */
    const initializeCustomSlider = () => {
        updateSlides();
        nextBtn.addEventListener('click', nextSlide);
        prevBtn.addEventListener('click', prevSlide);
    };

    /**
     * Уничтожение самописного слайдера
     */
    const destroyCustomSlider = () => {
        nextBtn.removeEventListener('click', nextSlide);
        prevBtn.removeEventListener('click', prevSlide);
    };

    /**
     * Логика переключения между Swiper и самописным решением
     */
    const handleResize = () => {
        const mobileMedia = window.matchMedia('(max-width: 1023px)').matches;

        if (mobileMedia) {
            destroyCustomSlider();
            initializeSwiper();
        } else {
            destroySwiper();
            initializeCustomSlider();
        }
    };

    // Инициализация при загрузке
    handleResize();

    // Обработчик изменения размера окна
    window.addEventListener('resize', handleResize);
});