/**
 * @name Grid
 * @author Julie Blanc <contact@julie-blanc.fr>
 * @see { @link https://gitlab.com/csspageweaver/plugins/grid/ }
 */


export default function gridEvents(id){
    let body = cssPageWeaver.ui.body;
    let fileTitle = cssPageWeaver.docTitle;
    let parameters = cssPageWeaver.features[id].parameters || {};
    let isParametersSet = Object.keys(parameters).length > 0;

    let grid = {};

    // valeur par défaut
    grid.default = {
        steps: 7,
    };

    grid.toggle = {};
    grid.toggle.value = localStorage.getItem('gridColToggle_' + fileTitle) || 'no-grid-col';
    grid.toggle.input = document.querySelector(`#${id}-toggle`);

    grid.steps = {};
    grid.steps.value = parameters.steps || grid.default.steps;
    grid.steps.input = document.querySelector('#steps-grid-col');


    /* Récupération de la session précédente si elle existe */

    grid.steps.value = localStorage.getItem('gridColSteps_' + fileTitle) || grid.steps.value;

    grid.steps.input.value = grid.steps.value;


    document.documentElement.style.setProperty('--grid-col-steps', grid.steps.value);


    /* DOM edit */
    if(grid.toggle.value === "grid-col"){
        body.classList.add('grid-col');  // on indique qu'il y a la grille
        grid.toggle.input.checked = true;
    } else {
        body.classList.remove('grid-col'); // grille désactivée
        grid.toggle.input.checked = false;
    }

   


    /* Toggle event */
    grid.toggle.input.addEventListener("input", (e) => {
        if(e.target.checked){
            body.classList.add('grid-col');  // grille activée
            localStorage.setItem('gridColToggle_' + fileTitle, 'grid-col');
        } else {
            body.classList.remove('grid-col');  // grille désactivée
            localStorage.setItem('gridColToggle_' + fileTitle, 'no-grid-col');
        }
    });


    /* Change grid steps on input */
    document.querySelector("#steps-grid-col").addEventListener("input", (e) => {
        grid.steps.value = e.target.value;
        document.documentElement.style.setProperty('--grid-col-steps', grid.steps.value);
        localStorage.setItem('gridColSteps_' + fileTitle, grid.steps.value);
    });

   
}