var View = function(){};

/***
 * OPn vied le container sauf le model
 * @param {type} controlId
 * @returns {undefined}
 */
View.Clear = function(controlId){
 
  var control = Dom.GetById(controlId);
  //On vide avant de remplir
  var oldChilds = control.childNodes;
  var nbChild =oldChilds.length;
  
  for(var k = nbChild; k > 0; k--){
      if(oldChilds[oldChilds.length - 1].className != undefined &&   oldChilds[oldChilds.length - 1].className.indexOf("model") < 0){
          control.removeChild(oldChilds[oldChilds.length - 1]);
        }
  }
};



function bindElement(element, dataItem) {

    // On vérifie que dataset existe
    if (element.dataset && element.dataset.property) {

        var prop = element.dataset.property;

        if (element.type === "hidden") {
            element.value = dataItem[prop];
        }
        else if (element.tagName === "IMG" && prop === "ImagePath") {
            // Cas spécifique pour les balises <img>
            element.src = dataItem.Images[0];
        }
        else if (element.tagName === "DIV" && prop === "ImagePath") {
            // Cas spécifique pour les balises <div> (background-image)
            element.style.backgroundImage = `url('${dataItem.Images[0]}')`;
        }
        else if (element.tagName === "A" && prop === "UrlPath") {
          // Cas spécifique pour les balises <a> href
          element.href = dataItem.UrlPath;
       }
        else {
            element.innerHTML = dataItem[prop];
        }
    }

    // Appel récursif sur tous les enfants
    var children = element.children;
    for (var i = 0; i < children.length; i++) {
        bindElement(children[i], dataItem);
    }
}

View.Bind = function (controlId, dataSource) {

    View.Clear(controlId);

    var control = Dom.GetById(controlId);
    var data;

    if (dataSource !== undefined) {
        data = dataSource;
    } else {
        var sourceId = control.dataset.source;
        var source = Dom.GetById(sourceId);
        data = JSON.parse(source.value);
    }

    var model = control.getElementsByClassName("model")[0];

    for (var i = 0; i < data.length; i++) {

        var newChild = model.cloneNode(true);
        newChild.className = newChild.className.replace("model", "");
        newChild.style.display = "block";

        // 🔥 Appel récursif ici
        bindElement(newChild, data[i]);

        control.appendChild(newChild);
    }
};
