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


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

    let grid = {};

    // valeur par défaut
    grid.default = {
        toggle: 'no-grid',
        spacing: 56,
        steps: 5,
        positionX: 28,
        positionY: 0
    };

    grid.toggle = {};
    grid.toggle.input = cssPageWeaver.ui.grid.toggleInput;
    grid.toggle.label = cssPageWeaver.ui.grid.toggleLabel;

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

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

    grid.positionX = {};
    grid.positionX.value = parameters.positionX || grid.default.positionX;
    grid.positionX.input = document.querySelector('#position-x-grid');

    grid.positionY = {};
    grid.positionY.value = parameters.positionY || grid.default.positionY;
    grid.positionY.input = document.querySelector('#position-y-grid');

    /* Récupération de la session précédente */
    grid.toggle.value = localStorage.getItem('gridToggle_' + fileTitle) || grid.default.toggle;
    grid.spacing.value = localStorage.getItem('gridSpacing_' + fileTitle) || grid.spacing.value;
    grid.steps.value = localStorage.getItem('gridSteps_' + fileTitle) || grid.steps.value;
    grid.positionX.value = localStorage.getItem('gridPositionX_' + fileTitle) || grid.positionX.value;
    grid.positionY.value = localStorage.getItem('gridPositionY_' + fileTitle) || grid.positionY.value;

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

    /* Set grid values on load */
    grid.spacing.input.value = grid.spacing.value;
    document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');

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

    grid.positionX.input.value = grid.positionX.value;
    document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');

    grid.positionY.input.value = grid.positionY.value;
    document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');

    /* Event listeners */

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

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

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

    /* Change grid position X on input */
    document.querySelector("#position-x-grid").addEventListener("input", (e) => {
        grid.positionX.value = e.target.value;
        document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
        localStorage.setItem('gridPositionX_' + fileTitle, grid.positionX.value);
    });

    /* Change grid position Y on input */
    document.querySelector("#position-y-grid").addEventListener("input", (e) => {
        grid.positionY.value = e.target.value;
        document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
        localStorage.setItem('gridPositionY_' + fileTitle, grid.positionY.value);
    });
}