'use strict';

// function
export 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);
        }
    })
}

export 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);
        }
    })
}

export function closeModalForm(close){
    let buttons = document.querySelectorAll(close),
        modal = document.querySelector('.modal');

    buttons.forEach(button => {
        button.onclick = function (buttonEvent) {
            modal.classList.remove('active');
            
            if (!modal.querySelector('.modal-map.active')) {
                modal.querySelector('.modal-form.active').classList.remove('active');
            }else{
                modal.querySelector('.modal-map.active').classList.remove('active');
            }
        }
    })
}

export 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');
            }
        }
        
    });
}

export 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.scrollY <= 25) {
                    thisRemoveBlock.classList.add(removeClass);
                }
            }
        }
    }
}

export function modalFormOpen(formOrNotification) {
    let buttons = document.querySelectorAll(formOrNotification),
        modal = document.querySelector('.modal');

    buttons.forEach(button => {
        button.onclick = function (eventButton) {
            let classOpenForm = button.dataset.form,
                form = modal.querySelector(`.${classOpenForm}`);                

            form.classList.add('active');
            modal.classList.add('active');
        }
    })
}
// function