var latestDocumentIndex = 0;
var latestDocumentMobileIndex = 0;
var latestDocuments = [];
var lastPageIndex = 0;
var currentPage = 0;
var totalDocuments = 0
var lastPage = 0;

// makes a POST request to a specified endpoint for filters and then parse the JSON response. Uses these documents to build the latestDocumentContainer and latestDocumentMobileContainer.
async function getLatestDocuments() {
    var request = await SendRequest('POST', baseUrl + 'savedFilters', { GetDocs: true });
    var json = JSON.parse(request.response);
    var docs = await json2array(json);
    latestDocuments = docs;
    lastPageIndex = Math.ceil(docs.length / 7);
    totalDocuments = docs.length;
    if (totalDocuments !== 0) {
        await buildLatestDocuments(0);
        await buildLatestDocumentsMobile();
        $("#latestDocumentWidget-mobile").remove();
    }
    else
    {
        $("#latestDocumentLoadingText").text("No documents published");
        $("#latestDocumentMobileLoadingText").text("No documents published");
    }
}

// updates the current page number and sets the page numbers in the navigation bar for latest documents widget
async function calculateCurrentPage(pageNumber) {
  var amountOfPages = lastPageIndex;
  if (pageNumber === 0) {
    pageNumber++;
  }

  $('#pageCount').text('Page ' + pageNumber + ' of ' + lastPageIndex);
  currentPage = pageNumber;
}

// moves the user to the next page and rebuilds the latestDocumentContainer
async function PageNext(addition) {
  if (currentPage < (lastPageIndex)) {
    addSkeletonLoader();
    latestDocumentIndex = latestDocumentIndex + addition;
    await rebuildLatestDocuments(++currentPage);
  }
}

// moves the user to the previous page and rebuilds the latestDocumentContainer
async function PagePrevious(subtraction) {
  if (currentPage != 1) {
    addSkeletonLoader();
    latestDocumentIndex = latestDocumentIndex - subtraction;
    await rebuildLatestDocuments(--currentPage);
  }
}

// takes the user back to the first page and rebuilds the latestDocumentContainer
async function PageFirst() {
  if (currentPage != 1) {
    addSkeletonLoader();
    latestDocumentIndex = 0;
    await rebuildLatestDocuments(0);
  }
}

// takes the user to the last page and rebuilds the latestDocumentContainer
async function PageLast() {
  if (currentPage < lastPageIndex) {
    addSkeletonLoader();
    latestDocumentIndex = totalDocuments - 2;
    lastPage = (lastPageIndex);
    await rebuildLatestDocuments(lastPage);
  }
}

/// Desktop View

// takes a pageNumber as a parameter and builds a set of HTML elements for the latestDocumentPane. It loops through 7 documents starting from the most recent and formats their data. 
async function buildLatestDocuments(pageNumber) {
  setTimeout(async function () {
    var startArray = latestDocumentIndex;
    var docs = "";
    var TodayAdded = false;
    var YesterdayAdded = false;
    var EarlyAdded = false;
    docs += `
        <div class="col-md-10 latest-document-pane">
          <div class="row latest-document-margin latest-document-padding-size cursor-pointer">
          ${latestDocumentMenu}
          </div>
          <div id="latestDocumentData" class="loading">`;
    for (let index = 0; index < 7; index++) {
      if (startArray >= latestDocuments.length) {
        break;
      }
      const document = latestDocuments[startArray];
      var publisheDate = new Date(document["publishedDate"]);
      var documentedDate = new Date(document["documentedDate"]);
      if (!TodayAdded && 1 === document["dateType"]) {
        TodayAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Today</b></div></div>'
      }
      if (!YesterdayAdded && 2 === document["dateType"]) {
        YesterdayAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Yesterday</b></div></div>'
      }
      if (!EarlyAdded && 3 === document["dateType"]) {
        EarlyAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Earlier</b></div></div>'
      }
      docs += '<div class="row latest-document-padding">' +
        '<div class="latest-document-data-block" >' +
        '<div class="col-md-1 latest-document-data-checkbox-column accessibleBox">' +
        '<label class="checkboxContainer accessibleBox">' +
          '<input id="latestDocumentCheckBox" tabindex="0" type="checkbox" name="documentCheckBox" value="' + document["deepLink"] + '" class="accessibleBox latest-document-data-checkbox cursor-pointer accessibleBox">' +
        '<span class="checkmark accessibleBox"></span>' +
        '</label>' +
        '</div>' +
        '<div class="col-md-10">' +
        '<div class="row">' +
        '<div class="latest-document-data-header-margin">' +
        '<p class="latest-document-data-header">' + document["title"] + '</p>' +
        '</div>' +
        '</div>' +
        '<div class="row">' +
        '<b class="latest-document-data-description">Client: <b class="second-text">' + document["clientName"] + '</b></b>' +
        '<b class="latest-document-data-description"> Category: <b class="second-text">' + document["category"] + '</b></b>' +
        '</div>' +
        '<div class="row">' +
        '<div class="latest-document-data-description-margin">' +
        '<b class="latest-document-data-description">Documented: <b class="second-text">' + documentedDate.toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "long" }) + '</b></b>'

        + '<b class="latest-document-data-description"> Published: <b class="second-text">' + publisheDate.toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "long", hour: "2-digit", minute: "2-digit" }).replace(' at', '') + '</b></b>'


        + '</div></div></div></div></div>';
      startArray++;
    }
    docs += `
          </div>
            <div class="row latest-document-padding text-center">
              <div class="latest-document-footer-block">
                <div class="latest-document-footer-navigation-center cursor-pointer">
                  ${latestDocumentNavigator}</div>
              </div>
            </div>
          </div>`;
    $('#latestDocumentContainer').empty();
    $("#latestDocumentContainer").append(docs);
    addSkeletonLoader();
    await calculateCurrentPage(pageNumber);
  }, 2000);
}

// takes a pageNumber as a parameter and rebuilds the latestDocumentData element based on the most recent documents. 
async function rebuildLatestDocuments(pageNumber) {
  setTimeout(async function () {
    var startArray = latestDocumentIndex;
    var docs = "";
    var count = 1
    var TodayAdded = false;
    var YesterdayAdded = false;
    var EarlyAdded = false;
    for (let index = 0; index < 7; index++) {
      if (startArray >= latestDocuments.length) {
        break;
      }
      const document = latestDocuments[startArray];
      if (!TodayAdded && 1 === document["dateType"]) {
        TodayAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Today</b></div></div>'
      }
      if (!YesterdayAdded && 2 === document["dateType"]) {
        YesterdayAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Yesterday</b></div></div>'
      }
      if (!EarlyAdded && 3 === document["dateType"]) {
        EarlyAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Earlier</b></div></div>'
      }
      docs += '<div class="row latest-document-padding">' +
        '<div class="latest-document-data-block">' +
        '<div class="col-md-1 latest-document-data-checkbox-column accessibleBox">' +
        '<label class="checkboxContainer accessibleBox">' +
          '<input id="latestDocumentCheckBox" type="checkbox" tabindex="0" name="documentCheckBox" value="' + document["deepLink"] + '" class="accessibleBox latest-document-data-checkbox cursor-pointer">' +
        '<span class="checkmark accessibleBox"></span>' +
        '</label>' +
        '</div>' +
        '<div class="col-md-10">' +
        '<div class="row">' +
        '<div class="latest-document-data-header-margin">' +
        '<p class="latest-document-data-header">' + document["title"] + '</p>' +
        '</div>' +
        '</div>' +
        '<div class="row">' +
        '<b class="latest-document-data-description">Client: <b class="second-text">' + document["clientName"] + '</b></b>' +
        '<b class="latest-document-data-description"> Category: <b class="second-text">' + document["category"] + '</b></b>' +
        '</div>' +
        '<div class="row">' +
        '<div class="latest-document-data-description-margin">' +
        '<b class="latest-document-data-description">Documented: <b class="second-text">' + document["documentedDateLabel"] + '</b></b>'+

        '<b class="latest-document-data-description"> Published: <b class="second-text">' + document["publishedDateLabel"] + '</b></b>'
      docs += '</div></div></div></div></div>'
      startArray++;
    }
    $('#latestDocumentData').empty();
    $("#latestDocumentData").append(docs);
    await calculateCurrentPage(pageNumber);
    addSkeletonLoader();
  }, 2000);
}

// takes a JSON object as an argument, and it converts its values into an array.
async function json2array(json) {
  var result = [];
  var keys = Object.keys(json);
  keys.forEach(function (key) {
    result.push(json[key]);
  });
  return result;
}

// selects all the checkboxes on the page.
async function SelectAll() {
  $('input:checkbox').prop('checked', true);
}

// deselects all checkboxes on the page.
async function ClearAll() {
  $('input:checkbox').prop('checked', false);
}

/// Desktop View
// takes a pageNumber as a parameter and builds a set of HTML elements for the latestDocumentPane. It loops through 7 documents starting from the most recent and formats their data. 
async function buildLatestDocuments(pageNumber) {
  setTimeout(async function () {
    var startArray = latestDocumentIndex;
    var docs = "";
    var TodayAdded = false;
    var YesterdayAdded = false;
    var EarlyAdded = false;
    var todayType = 1;
    var yesterType = 2;
    var earlierType = 3;
    docs += `
        <div class="col-md-10 latest-document-pane">
          <div class="row latest-document-margin latest-document-padding-size cursor-pointer">
          ${latestDocumentMenu}
          </div>
          <div id="latestDocumentData" class="loading">`;
    for (let index = 0; index < 7; index++) {
      if (startArray >= latestDocuments.length) {
        break;
      }
      const document = latestDocuments[startArray];
      if (!TodayAdded && todayType === document["dateType"]) {
        TodayAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Today</b></div></div>'
      }
      if (!YesterdayAdded && yesterType === document["dateType"]) {
        YesterdayAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Yesterday</b></div></div>'
      }
      if (!EarlyAdded && earlierType === document["dateType"]) {
        EarlyAdded = true;
        docs += '<div class="row latest-document-padding"><div class="day-header"><b class="day-header-text">Earlier</b></div></div>'
      }
      docs += '<div class="row latest-document-padding">' +
        '<div class="latest-document-data-block">' +
        '<div class="col-md-1 latest-document-data-checkbox-column accessibleBox">' +
        '<label class="checkboxContainer accessibleBox">' +
          '<input id="latestDocumentCheckBox" type="checkbox" tabindex="0" name="documentCheckBox" value="' + document["deepLink"] + '" class="accessibleBox latest-document-data-checkbox cursor-pointer accessibleBox">' +
        '<span class="checkmark accessibleBox"></span>' +
        '</label>' +
        '</div>' +
        '<div class="col-md-10">' +
        '<div class="row">' +
        '<div class="latest-document-data-header-margin">' +
        '<p class="latest-document-data-header">' + document["title"] + '</p>' +
        '</div>' +
        '</div>' +
        '<div class="row">' +
        '<b class="latest-document-data-description">Client: <b class="second-text">' + document["clientName"] + '</b></b>' +
        '<b class="latest-document-data-description"> Category: <b class="second-text">' + document["category"] + '</b></b>' +
        '</div>' +
        '<div class="row">' +
        '<div class="latest-document-data-description-margin">' +
        '<b class="latest-document-data-description">Documented: <b class="second-text">' + document["documentedDateLabel"] + '</b></b>'+

        '<b class="latest-document-data-description"> Published: <b class="second-text">' + document["publishedDateLabel"] + '</b></b>'
        + '</div></div></div></div></div>';
      startArray++;
    }
    docs += `
          </div>
            <div class="row latest-document-padding text-center">
              <div class="latest-document-footer-block">
                <div class="latest-document-footer-navigation-center cursor-pointer">
                  ${latestDocumentNavigator}</div>
              </div>
            </div>
          </div>`;
    $('#latestDocumentContainer').empty();
    $("#latestDocumentContainer").append(docs);
    addSkeletonLoader();
    await calculateCurrentPage(pageNumber);
  }, 2000);
}

function formatDocumentDate(date) {
  //date = convertLatestDocumentsDateToUCT(date);
  var year = date.getFullYear();
  var month = date.toLocaleString('default', { month: 'long' });
  var day = date.getDate();

  return `${day} ${month} ${year}`
}

function formatPublishDate(oldDate) {
  
  var date = new Date(oldDate.getTime() - (oldDate.getTimezoneOffset() * 60000) - (10 * 60 * 60000));
  var year = date.getFullYear();
  var month = date.toLocaleString('default', { month: 'long' });
  var day = date.getDate();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var time = hours + ':' + minutes + ' ' + ampm;

  return `${day} ${month} ${year} ${time}`
}

function convertLatestDocumentsDateToUCT(date) {
  if (date != null && date != "") {
    const offsetInMinutes = new Date().getTimezoneOffset();
    const offsetInMilliseconds = offsetInMinutes * 60 * 1000;
    return new Date((offsetInMilliseconds * -1) + (date.getTime()));
  }
  return date;
}

/// Mobile View
// creates elements for the mobile view of the latestDocumentPane. 
async function buildLatestDocumentsMobile() {
  setTimeout(async function () {
    var startArray = latestDocumentMobileIndex;
    var docs = "";
    var TodayAdded = false;
    var YesterdayAdded = false;
    var EarlyAdded = false;
    for (let index = 0; index < 6; index++) {
      if (startArray >= latestDocuments.length) {
        $("#viewMoreLatestDocumentsButton").empty();
        break;
      }

      const document = latestDocuments[startArray];
      var publisheDate = new Date(document["publishedDate"]);
      var documentedDate = new Date(document["documentedDate"]);
      if (!TodayAdded && 1 === document["dateType"]) {
        TodayAdded = true;
        docs += '<div class="day-header"><b class="day-header-text">Today</b></div>'
      }
      if (!YesterdayAdded && 2 === document["dateType"]) {
        YesterdayAdded = true;
        docs += '<div class="day-header"><b class="day-header-text">Yesterday</b></div>'
      }
      if (!EarlyAdded && 3 === document["dateType"]) {
        EarlyAdded = true;
        docs += '<div class="day-header"><b class="day-header-text">Earlier</b></div>'
      }
      docs += '<div class="latest-document-data-block" onclick=ViewMobile("' + document["deepLink"] +'") "><div>' +
        '<div class="row">' +
        '<div class="col-sm-12 latest-document-data-header-margin"><b class="latest-document-data-header">' + document["title"] + '</b></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-sm-6"><b class="latest-document-data-description">Client: <b class="second-text">' + document["clientName"] + '</b></b>' +
        '</div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-sm-6"><b class="latest-document-data-description">Category: <b class="second-text">' + document["category"] + '</b></b></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-sm-6"><b class="latest-document-data-description">Documented: <b class="second-text">' + document["documentedDateLabel"] + '</b></b></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-sm-6"><b class="latest-document-data-description">Published: <b class="second-text">' + document["publishedDateLabel"] + '</b></b>' +
        '</div>' +
        '</div></div>' +
        `<div style="position: relative;"><svg style="position: absolute; right: 0; bottom: 60px;" xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.99965C0 4.86705 0.0526784 4.73987 0.146447 4.6461C0.240215 4.55233 0.367392 4.49965 0.5 4.49965H12.293L9.146 1.35366C9.05211 1.25977 8.99937 1.13243 8.99937 0.999655C8.99937 0.866879 9.05211 0.739542 9.146 0.645655C9.23989 0.551768 9.36722 0.499023 9.5 0.499023C9.63278 0.499023 9.76011 0.551768 9.854 0.645655L13.854 4.64565C13.9006 4.6921 13.9375 4.74728 13.9627 4.80802C13.9879 4.86877 14.0009 4.93389 14.0009 4.99965C14.0009 5.06542 13.9879 5.13054 13.9627 5.19129C13.9375 5.25203 13.9006 5.30721 13.854 5.35365L9.854 9.35365C9.76011 9.44754 9.63278 9.50029 9.5 9.50029C9.36722 9.50029 9.23989 9.44754 9.146 9.35365C9.05211 9.25977 8.99937 9.13243 8.99937 8.99965C8.99937 8.86688 9.05211 8.73954 9.146 8.64565L12.293 5.49965H0.5C0.367392 5.49965 0.240215 5.44698 0.146447 5.35321C0.0526784 5.25944 0 5.13226 0 4.99965Z" fill="black"/>
        </svg></div>`+
        '</div>'
      startArray++;
    }
    $("#latestDocumentMobileContainer").append(docs);
    latestDocumentMobileIndex = startArray;
  }, 2000);
}

async function viewMoreLatestDocumentsMobile() {
  var startArray = latestDocumentMobileIndex;
  var docs = "";
  var TodayAdded = false;
  var YesterdayAdded = false;
  var EarlyAdded = false;
  for (let index = 0; index < 6; index++) {
    if (startArray >= latestDocuments.length) {
      $("#viewMoreLatestDocumentsButton").empty();
      break;
    }

    const document = latestDocuments[startArray];
    var publisheDate = new Date(document["publishedDate"]);
    var documentedDate = new Date(document["documentedDate"]);
    if (!TodayAdded && 1 === document["dateType"]) {
      TodayAdded = true;
      docs += '<div class="day-header"><b class="day-header-text">Today</b></div>'
    }
    if (!YesterdayAdded && 2 === document["dateType"]) {
      YesterdayAdded = true;
      docs += '<div class="day-header"><b class="day-header-text">Yesterday</b></div>'
    }
    if (!EarlyAdded && 3 === document["dateType"]) {
      EarlyAdded = true;
      docs += '<div class="day-header"><b class="day-header-text">Earlier</b></div>'
    }
    docs += '<div class="latest-document-data-block" onclick=ViewMobile("' + document["deepLink"] +'") "><div>' +
      '<div class="row">' +
      '<div class="col-sm-12 latest-document-data-header-margin"><b class="latest-document-data-header">' + document["title"] + '</b></div>' +
      '</div>' +
      '<div class="row">' +
      '<div class="col-sm-6"><b class="latest-document-data-description">Client: <b class="second-text">' + document["clientName"] + '</b></b>' +
      '</div>' +
      '</div>' +
      '<div class="row">' +
      '<div class="col-sm-6"><b class="latest-document-data-description">Category: <b class="second-text">' + document["category"] + '</b></b></div>' +
      '</div>' +
      '<div class="row">' +
      '<div class="col-sm-6"><b class="latest-document-data-description">Documented: <b class="second-text">' + document["documentedDateLabel"] + '</b></b></div>' +
      '</div>' +
      '<div class="row">' +
      '<div class="col-sm-6"><b class="latest-document-data-description">Published: <b class="second-text">' + document["publishedDateLabel"] + '</b></b>' +
      '</div>' +
      '</div></div>' +
      `<div style="position: relative;"><svg style="position: absolute; right: 0; bottom: 60px;" xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.99965C0 4.86705 0.0526784 4.73987 0.146447 4.6461C0.240215 4.55233 0.367392 4.49965 0.5 4.49965H12.293L9.146 1.35366C9.05211 1.25977 8.99937 1.13243 8.99937 0.999655C8.99937 0.866879 9.05211 0.739542 9.146 0.645655C9.23989 0.551768 9.36722 0.499023 9.5 0.499023C9.63278 0.499023 9.76011 0.551768 9.854 0.645655L13.854 4.64565C13.9006 4.6921 13.9375 4.74728 13.9627 4.80802C13.9879 4.86877 14.0009 4.93389 14.0009 4.99965C14.0009 5.06542 13.9879 5.13054 13.9627 5.19129C13.9375 5.25203 13.9006 5.30721 13.854 5.35365L9.854 9.35365C9.76011 9.44754 9.63278 9.50029 9.5 9.50029C9.36722 9.50029 9.23989 9.44754 9.146 9.35365C9.05211 9.25977 8.99937 9.13243 8.99937 8.99965C8.99937 8.86688 9.05211 8.73954 9.146 8.64565L12.293 5.49965H0.5C0.367392 5.49965 0.240215 5.44698 0.146447 5.35321C0.0526784 5.25944 0 5.13226 0 4.99965Z" fill="black"/>
      </svg></div>`+
      '</div>'
    startArray++;
  }
  if (startArray >= latestDocuments.length) {
    $("#viewMoreLatestDocumentsButton").empty();
  }
  $("#latestDocumentMobileContainer").append(docs);
  latestDocumentMobileIndex = startArray;
}

// adds a loading effect to the page while the latestDocumentData loads.
function addSkeletonLoader() {
  if ($("#latestDocumentData").hasClass('loading')) {

    $("#latestDocumentData").removeClass('loading');
  } else {
    $("#latestDocumentData").addClass('loading');
    $(function () {
      var itemsToHide = document.getElementsByClassName('latest-document-data-checkbox cursor-pointer');

      for (let index = 0; index < itemsToHide.length; index++) {
        itemsToHide[index].style = "display: none";
      }

      $("#latestDocumentCheckBox").addClass("hide-check-box");
      $("#latestDocumentData, #latestDocumentData *")                  // selects the element and all element nodes inside it
        .contents()                                // selects all child nodes including tags, comments and text
        .filter(function () {
          return this.nodeType === Node.TEXT_NODE; // filter text nodes
        }).remove();                               // remove text
    });
  }
}