import gsap from 'gsap'
export default (() => {
    const decorPanelInner = document.querySelector('.decor-panel .inner')
    const decorPanelOuter = document.querySelector('.decor-panel .outer')
    const decorPanel = document.querySelector('.decor-panel')
    const decorPanelToggle = document.querySelectorAll('.decor-filter .filters')
    const header = document.querySelector('.main-header')

    if(decorPanel) {
        window.addEventListener('load', () => {
            const width = decorPanelInner.offsetWidth;

            const offset = 25
            const adminBar = document.querySelector('#wpadminbar')

            if(adminBar) {
                decorPanelInner.style.paddingTop = header.offsetHeight + offset + adminBar.offsetHeight + 'px'
            } else {
                decorPanelInner.style.paddingTop = header.offsetHeight + offset +  'px'
            }

            decorPanelInner.style.position = null;
            decorPanelInner.style.left = - width + 'px';

            const decorPanelClose = decorPanel.querySelector('.filters svg')
    
            decorPanelToggle.forEach(single => {
                single.addEventListener('click', () => {
                    decorPanel.classList.add('active')
                    decorPanelOuter.classList.add('active')
                    decorPanelInner.style.left = 0;
                })
            })

            decorPanelClose.addEventListener('click', () => {
                decorPanel.classList.remove('active')
                decorPanelOuter.classList.remove('active')
                decorPanelInner.style.left = -width + 'px';
            })

            const outsideClick = (e) => {
                if ($(e.target).closest(decorPanelOuter).length) {
                    console.log('test')
                    decorPanel.classList.remove('active')
                    decorPanelOuter.classList.remove('active')
                    decorPanelInner.style.left = -width + 'px';
                }
            }

            document.addEventListener('click', outsideClick);
        })
    }
})()
