'use strict';

// function
function modalOpen(buttonElement, contentElement){
    let modal = document.querySelector('.modal'),
        aside = document.querySelector('.modal__aside'),
        elements = document.querySelectorAll(buttonElement),
        device = window.screen.width;

    elements.forEach(e => {
        let thisContentElement = document.querySelector(contentElement);

        e.onclick = function () {
            modal.classList.add('active');
            thisContentElement.classList.add('active');
            
            let width = thisContentElement.clientWidth;

            setTimeout(() => {
                if (device <= 720) {
                    aside.style.width = `${device}px`;
                    thisContentElement.style.opacity = 1;
                    thisContentElement.style.filter = 'blur(0px)';
                }else{
                    aside.style.width = `${width}px`;
                    thisContentElement.style.opacity = 1;
                    thisContentElement.style.filter = 'blur(0px)';
                }
            }, 10);
        }
    })
}

function modalClose(buttonElement) {
    let modal = document.querySelector('.modal'),
        aside = document.querySelector('.modal__aside'),
        asideItems = document.querySelectorAll('.modal__item'),
        elements = document.querySelectorAll(buttonElement);

    elements.forEach(e => {
        e.onclick = function () {            
            aside.style.width = '0px';
            
            asideItems.forEach(e => {
                if (e.classList.contains('active')) {
                    e.style.filter  = 'blur(10px)';
                }
            });

            setTimeout(() => {
                asideItems.forEach(e => {
                    if (e.classList.contains('active')) {
                        e.classList.remove('active');
                    }
                });

                modal.classList.remove('active');
            }, 300);
        }
    })
}

function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
    let elements = document.querySelectorAll(mainElement);

    elements.forEach(e => {
        let thisMainElement = e,
            thisButtonElement = e.querySelector(buttonElement),
            thisHeightElement = e.querySelector(heightElement),
            thisContentElement = e.querySelector(contentElement);        

        thisButtonElement.onclick = function (e) {
            let height = thisHeightElement.clientHeight;

            if (close == true && !thisMainElement.classList.contains('active')) {
                elements.forEach(e => {
                    if (e.classList.contains('active')) {
                        e.classList.remove('active');
                        e.querySelector(contentElement).style.height = null
                    }                    
                })
            }

            if (!thisMainElement.classList.contains('active')) {
                thisContentElement.style.height = `${height}px`;
                thisMainElement.classList.add('active');
            }else{
                thisContentElement.style.height = null;
                thisMainElement.classList.remove('active');
            }
        }
        
    });
}
var menu_opened = false;
function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
    let thisButton = document.querySelector(button), 
        thisContent = document.querySelector(content),
        thisRemoveBlock = document.querySelector(removeBlock) || '',
        thisBlockheight = document.querySelector(blockheight);

    thisButton.onclick = function () {
        let height = thisBlockheight.clientHeight;

        if (!thisContent.classList.contains('open')) {
            thisContent.style.height = `${height}px`;
            thisContent.classList .add('open');

            if (removeBlock) {
                thisRemoveBlock.classList.remove(removeClass);
            }
        }else{
            thisContent.style.height = null;
            thisContent.classList.remove('open');

            if (removeBlock) {
                if (window.Y <= 25) {
                    thisRemoveBlock.classList.add(removeClass);
                }
            }
        }
        menu_opened = !menu_opened;
    }
}



if (document.querySelector('.header').classList.contains('white')) {
    window.addEventListener("scroll", function (e) {
        let header = document.querySelector('.header');
        let scroll = window.scrollY;
        if(!menu_opened){
        if (scroll >= 25) {
            header.classList.remove('white')
        }else{
            
            header.classList.add('white')
            
        }
    }
        
    });
}

toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white');
toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white');
// scroll



