class Modal {
    // TODO : industrialiser en créant une classe 
}

const modalDialog = document.getElementById('modal');

var modal_hooks = [];

function disableScrolling(){
    /*
    document.body.style.position = 'fixed';
    document.body.style.top = `-${window.scrollY}px`;
    */

    /*
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
    */

    // Ne marche pas : 
    //    supprime la scrollbar (déplacement du body vers la droite)
    // document.body.style.overflow='hidden';

    // Ne marche pas : 
    //    la modal ne propage pas le scroll
    // modalDialog.scroll = function(e) {e.stopPropagation();}
}

function enableScrolling(){
    /*
    const scrollY = document.body.style.top;
    document.body.style.position = '';
    document.body.style.top = '';
    window.scrollTo(0, parseInt(scrollY || '0') * -1);
    */

    // Ne marche pas  :
    //    au retour, certains élements de la page ne sont plus clickables
    //document.body.style.overflow='scroll';

    // window.onscroll=function(){};
}

function showDialog(){
    modalDialog.showModal();
    disableScrolling()
}

function show_modal(data_modal) {
    showDialog();
    if (typeof open_modal_hook === 'function') open_modal_hook(data_modal);
};

function close_modal() 
{
    modalDialog.close();
    enableScrolling();
}

function init_modal() 
{
    let testElements = document.getElementsByClassName('js-open-modal-trigger');
    let testDivs = Array.prototype.filter.call(testElements, function(testElement){
        return true;
    });

    testDivs.forEach(function(item){
        item.onclick = function(ev) {
            show_modal(this.getAttribute("data-modal-info"));
        };
    });
    

    testElements = document.getElementsByClassName('js-close-modal-trigger');
    testDivs = Array.prototype.filter.call(testElements, function(testElement){
        return true;
    });

    testDivs.forEach(function(item){
        item.onclick = function(ev) {
            close_modal(this.getAttribute("data-modal-info"));
        };
    });

    return true;
}

function close_modal_hook()
{
    console.log("close_modal_hook");

    modalSetInnerHtml('modal_header', '');
    modalSetInnerHtml('modal_body', '');
    modalSetInnerHtml('modal_footer',  '');    
}

function modalSetInnerHtml(className, valeur)
{
    var testElements = document.getElementsByClassName(className);
    var testDivs = Array.prototype.filter.call(testElements, function(testElement){
        return true;
    });
    testDivs.forEach(function(element){
        element.scrollTop = 0;
        element.innerHTML = valeur;
    });
}

function modalSetChildren(className, children)
{
    var testElements = document.getElementsByClassName(className);
    var testDivs = Array.prototype.filter.call(testElements, function(testElement){
        return true;
    });
    modalSetInnerHtml(className, '');
    testDivs.forEach(function(element){
        element.scrollTop = 0;
        element.appendChild(children);
    });
}

function modalSetHeader(valeur)
{
    modalSetInnerHtml('modal_header', valeur);
}
function modalSetBody(valeur)
{
    modalSetInnerHtml('modal_body', valeur);
}
function modalSetFooter(valeur)
{
    modalSetInnerHtml('modal_footer', valeur);
}

/*
 * Format du paramètre : methode:p1=v1,p2=v2
 */
function open_modal_hook(parametre)
{
    myLog("open_modal_hook pour "+parametre);
    let hook = null;
    let paramSplit = parametre.split(':');
    paramSplit.forEach(element => {
        let elemSplit=element.split('=');
        if (elemSplit[0] === 'type') {
            hook = modal_hooks[elemSplit[1]];
        }
    });
    if ((hook===null)||(hook===undefined)) hook = modal_hooks['random'];
    return hook(parametre);
}

init_modal();