import {activeLoader, desactiveLoader} from 'Global/Ajax/loader'
import {desactivePopup} from 'Global/Popup/popupCore'
import {refrechDiv} from 'Global/Layout/navigation'

export function changeModule(path, mode) {
    activeLoader();
    $.ajax({
        dataType : 'html',
        url: path,
        data: {'type' : mode},
        type: "POST",
        statusCode: {
            413: function() {
                desactiveLoader();
                desactivePopup();
                alert('Error - ModSecurity.');
            }
        },
        success: function(){
            refrechDiv(window.location.pathname, 'menu-principal');
        }
    });
}

export const Menu = {
    _boot: () => {
        // Menu layout externe ?
        $(document).click(function(event) { 
            if(!$(event.target).closest('#sidebarMenu').length 
                && !$(event.target).closest('#sidebarIconToggleId').length
            ) {
                if($('#openSidebarMenu').is(':checked') ){
            
                    $("#openSidebarMenu").prop('checked', false);
                    $("#imgFooterLogo").hide();
                }
            } else if($(event.target).closest('#sidebarIconToggleId').length ){
                if(!$('#openSidebarMenu').is(':checked') ){
            
                    $("#imgFooterLogo").fadeIn();
                    $("#openSidebarMenu").prop('checked', true);
                }else{
                    
                    $("#imgFooterLogo").hide();
                    $("#openSidebarMenu").prop('checked', false);
                }
            }
                
        });
        $(document).ready(function(){
            $('.toast__close').click(function(e){
                e.preventDefault();
                var parent =  $(this).parent('.toast');
                parent.fadeOut("slow", function() {  $(this).remove(); } );
            });
        });
    },
    _onPageLoad: () => {
        // Menu contextuel
        function listenMC() {
            let containers = document.querySelectorAll('[data-container-contextuel]');

            containers.forEach((element) => {
                let parentId = element.getAttribute('data-container-contextuel');
                
                // TODO : use CSS instead
                let parent = document.querySelector('#'+parentId);
                parent.addEventListener('mouseover', ()=> {
                    element.style.opacity = 1;
                });
                parent.addEventListener('mouseout', () =>{
                    element.style.opacity = 0;
                });

                // Prevent element from been processed twice
                element.removeAttribute('data-container-contextuel');
            });
        }

        // Bind on dom mutation
        const observerMc = new MutationObserver(function () {
            // TODO: only process new dom
            listenMC();
        });
        observerMc.observe(document.body, {
            attributes: false,
            childList: true,
            subtree: true,
            characterData: false
        });
        listenMC();
    }
}