import $ from "jquery";

const initHeader = () => {
    $(document).on('scroll', scrollHeader);

    const userLang = navigator.language;

    if (userLang !== 'ru-RU') {
        $('.js-ru').css('order', '1');
        $('.js-en').css('order', '-1');
    }

    function scrollHeader() {
        const windowHeight = $(window).height();

        if ($(window).scrollTop() > 5) {
            $('.app-header').addClass('is-sticked');
        } else {
            $('.app-header').removeClass('is-sticked');
        }

        $('.container').each(function () {
            let $element = $(this);
            const elemPosition = $element.position().top;
            const elemHeight = $element.height();

            if ($(window).scrollTop() + windowHeight * 0.66 >= elemPosition &&
                $(window).scrollTop() - windowHeight * 0.1 < elemPosition + elemHeight) {
                if (!$element.hasClass('is-current')) {
                    $element.addClass('is-current');
                    $element.addClass('play-anim');
                    $element.prev().addTemporaryClass('is-exiting', 600);
                }
            } else if ($element.hasClass('is-current')) {
                $element.removeClass('is-current');
                $element.addClass('is-viewed');
            }
        });
    }
    scrollHeader();

    const breakpointLg = window.matchMedia('(min-width: 1024px)');
    const header = document.querySelector('.app-header');
    const menuSwitcher = document.querySelector('#menu-switcher');
    const headNavWrap = document.querySelector('.app-header__nav-wrap');

    const documentClickHandler = (e) => {
        if (menuSwitcher.checked && e.target !== menuSwitcher) {
            if (!e.target.closest('.app-header__nav-wrap')) {
                menuSwitcher.checked = false;
                setTimeout(() => {
                    window.enableBodyScroll(headNavWrap);
                    document.removeEventListener('click', documentClickHandler);
                }, 300);
            }
        }
    }

    menuSwitcher.addEventListener('change', (e) => {
        if (menuSwitcher.checked) {
            window.disableBodyScroll(headNavWrap);
            document.addEventListener('click', documentClickHandler)
        } else {
            setTimeout(() => {
                window.enableBodyScroll(headNavWrap);
                document.removeEventListener('click', documentClickHandler)
            }, 300);
        }
    })

    const observeModal = () => {
        const body = document.body;
        const observer = new MutationObserver(() => {
            if (breakpointLg.matches) {
                header.style.paddingRight = body.style.paddingRight;
            }
        });

        observer.observe(body, {attributes: true});
    };

    observeModal();
}

export {initHeader}