export const Popup = {
    _boot: () => {
        document.addEventListener('click',(event) => {
            var target = event.target;
            if (! (target instanceof HTMLElement) ) return;
            if (
                ! target.hasAttribute('data-dismiss') 
                || target.getAttribute('data-dismiss') != 'modal'
            ) return;

            desactivePopup()
            return false;
        });
    }
}

/**
 * 
 * function qui permet d'afficher des popups
 * @returns popup
 */
export function activePopup( title, body, classCss, reload = false )
{
    if (title) {
        document.getElementById('modal-title').innerHTML = title;
    }
    if (classCss) {
        classCss = classCss.trim(); // TODO : remove space in the caller
        document.getElementById('modal-content').classList.add(classCss);
    }
    if (body) {
        // Jq.html is required here in order to execute <script> inside body
        $(document.getElementById('modal-body')).html(body);
    }
    
    // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("modal-close")[0];
    
    // When the user clicks the button, open the modal 
    modal.style.display = "block";
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // Close the popoup with esc key 
    document.addEventListener('keydown', function(event) {
        const key = event.key; // const {key} = event; in ES6+
        if (key === "Escape") {
            modal.style.display = "none";
        }
    });

    if (reload) {
        let modalObserver = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.attributeName === 'style') {
                    if (modal.style.display === 'none') {
                        window.location.reload();
                    }
                }
            });
        });

        let config = { attributes: true, childList: false, subtree: false };
        modalObserver.observe(modal, config);
    }
    
    // PopUp draggable
    $('#myModal .modal-content').css({'top':'0', 'left': '0'});
    $('#myModal .modal-content').draggable({
        handle: ".modal-header"
    });

    $('.modal-header').removeClass('popup_informative');
    $('.modal-header').removeClass('popup_error');
    $('.modal-header').removeClass('popup_alert');
       
    return modal;
}

// fin function draggable
// TODO : Ajouter un timer sur la désactivation de la popup
export function desactivePopup () {
    
    document.getElementById('myModal').style.display = "none";
    
    $("#modal-content").removeClass('modal_small');
    $("#modal-content").removeClass('modal_large');

    $("#modal-title").html('');
    $("#modal-body").html('');

    $('iframe').not($('#bandeau > iframe')).show();

    $('#wanteeedPanel').hide();
}
