// Find where we will create rows and insert all items
const rowSection = document.getElementById("link-box");

// Fetch our json file so we can insert it into our document
function listInitialise() {
  fetch("res/asset-json-list.json")
    .then((res) => res.json())
    .then((listData) => {
      listUpdate(listData);
    })
    .catch(console.error);
}
listInitialise();

function listUpdate(listData) {
  // Pulling the number of columns the user asserts to render
  let columnCount = listData.columnCount;
  // Calculating how many items there are to list
  let rowItemCount = listData.rowItems.length;
  // Calculating the number of rows to create
  let rows = Math.ceil(rowItemCount / columnCount);

  // Use our calculated number of rows to create that many unordered lists
  for (let listContainer = 0; listContainer < rows; listContainer++) {
    // The template for our unordered list html
    rowHTML = '<ul class="row"></ul>';
    // Append said unordered list template to the page
    rowSection.innerHTML += rowHTML;
    // Select our unordered list's inner html
    rowList = rowSection.childNodes[listContainer];
    // Create first entry (purely decorative)
    rowList.innerHTML = "<li>>//</li>";
    // Use our asserted number of items in each row (columnCount) to populate each row
    for (let rowItem = 0; rowItem < columnCount; rowItem++) {
      // Each row must contain our decided number but not repeat. This will offset each new row with the next item entries.
      rowOffset = listContainer * columnCount;
      // In the case that the number of items does not exactly divide, end the appending early to avoid errors
      if (rowItemCount <= rowOffset + rowItem) {
        // Append last list entry (purely decorative)
        rowList.innerHTML += "<li>//-</li>";
        // End the function early
        return;
      } else {
        // Get the title of this rows appropriate item
        let title = listData.rowItems[rowItem + rowOffset].title;
        // Get the url of this rows appropriate item
        let url = listData.rowItems[rowItem + rowOffset].url;
        // The template for our list item
        rowConstruct = '<li><a href="' + url + '">' + title + "</a></li>";
        // Append said list item template to the current row.
        rowList.innerHTML += rowConstruct;
      }
    }

    // Append last list entry (purely decorative)
    rowList.innerHTML += "<li>//-</li>";
  }
}