// modal
modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket');
modalOpen('.open-to-know', '.modal__to-know');
modalOpen('.login-open', '.modal__login');
modalClose('.modal__close');

let modal = document.querySelector('.modal');

modal.onclick = function (event) {
    let target = event.target;
    if (target.classList.contains('modal')) {
        closeAllModals();
    }
}

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

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

        e.onclick = function () {
            body.classList.add('overflow-hidden');
            modal.classList.add('active');
            thisContentElement.classList.add('active');
            
            let width = thisContentElement.clientWidth;
            if (width < 400){
                width = 400
            }
            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 closeAllModals() {
    let modal = document.querySelector('.modal'),
        aside = document.querySelector('.modal__aside'),
        asideItems = document.querySelectorAll('.modal__item'),
        body = document.querySelector('body');

    aside.style.width = '0px';
    body.classList.remove('overflow-hidden');
    
    asideItems.forEach(item => {
        if (item.classList.contains('active')) {
            item.style.opacity = 0;
            item.style.filter = 'blur(10px)';
        }
    });

    setTimeout(() => {
        asideItems.forEach(item => {
            item.classList.remove('active');
        });
        modal.classList.remove('active');
    }, 300);
}

function modalClose(buttonElement) {
    let elements = document.querySelectorAll(buttonElement);
    elements.forEach(e => {
        e.onclick = closeAllModals;
    });
}

// resize
window.addEventListener('resize', (e) => {
    let width = window.screen.width;

    // media
    modalOpen('.button--filter', '.modal__filter');
    modalOpen('.basket-open', '.modal__basket');
    modalOpen('.open-to-know', '.modal__to-know');
    modalOpen('.login-open', '.modal__login');
    modalClose('.modal__close');
    
    let modalItem = document.querySelectorAll('.modal__item');

    // if (width <= 720) {
        modalItem.forEach(modal => {
            if (modal.classList.contains('active')) {
                let aside = document.querySelector('.modal__aside');

                if (width <= 720) {
                    aside.style.width = `${width}px`
                }else{
                    let openAside = document.querySelector('.modal__item.active'),
                        newWidth = openAside.clientWidth;
                    if (newWidth < 400){
                        newWidth = 400
                    }
                    aside.style.width = `${newWidth}px`
                }
            }
        })
    // }
});
// resize