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();