let clsValue = 0;
let clsValueOld = 0;
let clsEntries = [];

//test 9

let sessionValue = 0;
let sessionEntries = [];

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // Only count layout shifts without recent user input.
    if (!entry.hadRecentInput) {
      const firstSessionEntry = sessionEntries[0];
      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];

      // If the entry occurred less than 1 second after the previous entry and
      // less than 5 seconds after the first entry in the session, include the
      // entry in the current session. Otherwise, start a new session.
      if (sessionValue &&
        entry.startTime - lastSessionEntry.startTime < 1000 &&
        entry.startTime - firstSessionEntry.startTime < 5000) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }
      //console.log(entry);

      // If the current session value is larger than the current CLS value,
      // update CLS and the entries contributing to it.
      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        clsEntries = sessionEntries;

        // Log the updated value (and its entries) to the console.
        console.error('CLS total: '+clsValue, 'entry: '+(clsValue-clsValueOld), clsEntries)
        var tempres = window.performance.getEntriesByType("resource");
        var tempresI = tempres.length > 3 ? 3 : tempres.length;
        var tempresConsole = [];
        while (tempresI>0) {
          tempresConsole.push([tempres[tempres.length-tempresI]["name"], tempres[tempres.length-tempresI]["initiatorType"]])
          --tempresI;
        }
        console.error("last 3 resources loaded",tempresConsole )
        clsValueOld = clsValue;
          clsEntries.forEach((valueTest) => {
          if((typeof valueTest.logged == "undefined") && (valueTest.logged=true)){
            var textoConsole = "CLS INSPECT:\n";
            valueTest.sources.forEach((valueSources) => {
              if (document.body.contains(valueSources.node)) {
                var parentBodyTemp = valueSources.node
                var parentBody = parentBodyTemp;
                var rcont = 0;
                while ((parentBodyTemp = parentBody.parentElement) && parentBodyTemp != document.body && rcont < 50) {
                  //console.log("false");
                  parentBody = parentBodyTemp;
                  rcont++;
                }
              }
              console.error(valueSources.node)
              textoConsole+=("\n"+"Elemento con CLS - id: " + (typeof valueSources.node.id != "undefined" ? valueSources.node.id : "").toString().padEnd(30) + "|| class: " + (typeof valueSources.node.classList != "undefined" ? valueSources.node.classList : "").toString().padEnd(30))
              textoConsole+=("\n"+"Padre del elemen - id: " + (typeof parentBody.id != "undefined" ? parentBody.id : "").toString().padEnd(30) + "|| class: " + (typeof parentBody.classList != "undefined" ? parentBody.classList : "").toString().padEnd(30))
              //console.log("%cVS  Elemento con CLS - id: " + valueSources.node.id + "|| class:" + valueSources.node.classList, 'background: #b005');
              //console.log("%c  Padre en el body del elemento con CLS - id: " + parentBody.id + "|| class:" + parentBody.classList, 'background: #b005');
              //console.log(valueSources.previousRect,"->", valueSources.currentRect);
              testeoP = valueSources.previousRect;
              testeoC = valueSources.currentRect;
              textoConsole+=("\n    "+"valor".padEnd(6) + "| " + "prev".toString().padEnd(5) + "  | " + "actu".toString().padEnd(5) + " | " + ("diff".toString().padEnd(6)))
              for (var key in testeoP) {
                var valueP = testeoP[key];
                var valueC = testeoC[key];
                if (valueP != valueC) {
                  textoConsole+=("\n    "+key.padEnd(6) + ": " + valueP.toString().padEnd(5) + " -> " + valueC.toString().padEnd(5) + " = " + (valueC - valueP).toString().padEnd(6))
                  //console.log("%c" + key + ": " + valueP + " -> " + valueC + " = " + (valueC - valueP), 'background: #b004; margin-left:25px');

                }

              }
              textoConsole+=("\n")

            })
            console.error("%c" + textoConsole, 'background: #b004; margin-left:25px');
          }
        })
        console.log("-")
      }
    }
  }
}).observe({
  type: 'layout-shift',
  buffered: true
});