document.addEventListener('DOMContentLoaded', () => {
    const EXTENSION_TITLE = "KeepNote";
    const EXTENSION_DESC = "Application de prise de note.";

    const PT_TH_ID = "Numéro de note";
    const PT_TH_NAME = "Nom";
    const PT_TH_ACTIONS = "Actions";

    //const DATA_FILE = "keep.json";

    let DEBUG_TXT = "";

    const BODY = document.querySelector("body");

    const LoadData = () => {
        return fetch("./data.json")
                .then((response) => response.json())
                .then((result) => {
                    return {
                        id: result.id,
                        name: result.name,
                    };
                });
    };

    DEBUG_TXT += LoadData;

    GenerateDisplay();

    GenerateDebug();

    function GenerateDisplay(){
        // |-> On selectionne les élement HTML à implémenter

        // Le titre et la description de l'app
        let title = document.querySelector("#extension-title");
        let desc = document.querySelector("#extension-description");

        // Le tableau regroupant les notes
        let pt_th_id = document.querySelector("#pt_th-id");
        let pt_th_name = document.querySelector("#pt_th-name");
        let pt_th_actions = document.querySelector("#pt_th-actions");

        // |-> On applique les changements

        // le titre et la description de l'app
        title.innerText = EXTENSION_TITLE;
        desc.innerText = EXTENSION_DESC;

        // Le tableau regroupant les notes
        pt_th_id.innerText = PT_TH_ID;
        pt_th_name.innerText = PT_TH_NAME;
        pt_th_actions.innerText = PT_TH_ACTIONS;
    }

    function GenerateDebug(){
        if(DEBUG_TXT === "" || DEBUG_TXT == null) return;

        // |-> On ajoute les infos de debug
        debug_txt = document.createElement("div");
        debug_txt.classList += "debug";
        debug_txt.innerHTML = `<i>${DEBUG_TXT}</i>`;
        BODY.appendChild(debug_txt);
    }
});