var SavedFilterIndex = 0;
var SavedFilterMobileIndex = 0;
var filters = [];
var savedFilterId;


async function getSavedFilters() {
  var request = await SendRequest('GET', baseUrl + 'savedFilters');
  var json = JSON.parse(request.response);
  filters = json
  if (filters.length > 0) {
    buildSavedFiltersMobile();
    buildSavedFilters();
    return json;
  } else {
    $("#savedFiltersWidget").css({ 'display': 'none' });
    $("#savedFiltersMobileWidget").css('display', 'none');
    return;
  }
}

async function deleteFilter() {
  addSavedFiltersSkeletonLoader();
  var filterId = { SavedFilterId: savedFilterId };
  var request = await SendRequest('DELETE', baseUrl + 'savedFilters', filterId);
  
  $("#deleteButtons").css({ 'display': 'none' });
  $("#deleteTextModal").css({ 'display': 'none' });
  $("#closeButton").css({ 'display': 'block' });
  $("#confirmationModal").css({ 'display': 'block' });
  SavedFilterIndex = 0;
  await getSavedFilters();
  addSavedFiltersSkeletonLoader();
}

async function deleteFilterMobile() {
  addSavedFiltersSkeletonLoaderMobile();
  var filterId = { SavedFilterId: savedFilterId };
  var request = await SendRequest('DELETE', baseUrl + 'savedFilters', filterId);

  $("#deleteButtons").css({ 'display': 'none' });
  $("#deleteTextModal").css({ 'display': 'none' });
  $("#closeButton").css({ 'display': 'block' });
  $("#confirmationModal").css({ 'display': 'block' });

  SavedFilterMobileIndex = 0;
  await getSavedFilters();
  addSavedFiltersSkeletonLoaderMobileLeaveText();
}

function resetDeleteModalState() {
  $("#deleteButtons").css({ 'display': 'block' });
  $("#deleteTextModal").css({ 'display': 'block' });
  $("#closeButton").css({ 'display': 'none' });
  $("#confirmationModal").css({ 'display': 'none' });
}

function buildSavedFiltersMobile() {
  var startArray = SavedFilterMobileIndex;
  var docs = "";

  // var filters = await getSavedFilters();
  if (startArray !== 0) {
    docs += '<div class="container" class="row padding-bottom-20">' +
      '<div class="col-xs-12 col-sm-12 text-center" style="padding-bottom: 20px;" onclick="PreviousFiltersMobile(1)">' +
      '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10" viewBox="0 0 18 10" fill="none" class="saved-search-Image-arrow cursor-pointer">' +
      '<path fill-rule="evenodd" clip-rule="evenodd" d="M8.55756 0.80764C8.61561 0.749436 8.68458 0.703258 8.76052 0.671749C8.83645 0.640241 8.91785 0.624023 9.00006 0.624023C9.08227 0.624023 9.16367 0.640241 9.2396 0.671749C9.31553 0.703258 9.3845 0.749436 9.44256 0.80764L16.9426 8.30764C17.0599 8.425 17.1258 8.58417 17.1258 8.75014C17.1258 8.91611 17.0599 9.07528 16.9426 9.19264C16.8252 9.31 16.666 9.37593 16.5001 9.37593C16.3341 9.37593 16.1749 9.31 16.0576 9.19264L9.00006 2.13389L1.94256 9.19264C1.8252 9.31 1.66603 9.37593 1.50006 9.37593C1.33409 9.37593 1.17492 9.31 1.05756 9.19264C0.940199 9.07528 0.874268 8.91611 0.874268 8.75014C0.874268 8.58417 0.940199 8.425 1.05756 8.30764L8.55756 0.80764Z" fill="black" />' +
      '</svg>' +
      '</div>' +
      '</div>'
  }
  if (startArray <= filters.length) {
    var types = "";
    var array = filters[startArray].filterData["DocumentTypes"];
    for (let index = 0; index < array.length; index++) {
      types += array[index].name + ", ";
    }
    docs += '<div>' +
      '<div class="container saved-search-white-container" style="min-width: 0%;">' +
      '<div class="col-xs-8 col-sm-8" style="padding-top: 6px;">' +
      '<div>' +
      '<div style="font-size: 16px; font-weight: 700;">' + filters[startArray].filterName + '</div>' +
      '</div>' +
      '<div>' +
      '<div class="saved-search-text">' 

      if (filters[startArray].filterData.dateRange == "") {
        if(filters[startArray].filterData.documentDateStart && filters[startArray].filterData.documentDateEnd){
          docs += [filters[startArray].filterData.documentCategoryName,
          types,
          filters[startArray].filterData.productName,
          filters[startArray].filterData.accountName,
          filters[startArray].filterData.clientName,
          new Date(filters[startArray].filterData.documentDateStart).toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "short" }),
          new Date(filters[startArray].filterData.documentDateEnd).toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "short" })
          ].filter(element => Boolean(element)).join(', ');
        } else if(filters[startArray].filterData.documentDateStart){
          docs += [filters[startArray].filterData.documentCategoryName,
          types,
          filters[startArray].filterData.productName,
          filters[startArray].filterData.accountName,
          filters[startArray].filterData.clientName,
          new Date(filters[startArray].filterData.documentDateStart).toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "short" }),
          ].filter(element => Boolean(element)).join(', ');
        }else if(filters[startArray].filterData.documentDateEnd){
          docs += [filters[startArray].filterData.documentCategoryName,
          types,
          filters[startArray].filterData.productName,
          filters[startArray].filterData.accountName,
          filters[startArray].filterData.clientName,
          new Date(filters[startArray].filterData.documentDateEnd).toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "short" }),
          ].filter(element => Boolean(element)).join(', ');
        }else{
          docs += [filters[startArray].filterData.documentCategoryName,
          types,
          filters[startArray].filterData.productName,
          filters[startArray].filterData.accountName,
          filters[startArray].filterData.clientName,
          ].filter(element => Boolean(element)).join(', ');
        }
       } else {
        docs += [filters[startArray].filterData.documentCategoryName,
        types,
        filters[startArray].filterData.productName,
        filters[startArray].filterData.accountName,
        filters[startArray].filterData.clientName,
        filters[startArray].filterData.dateRangeName].filter(element => Boolean(element)).join(', ') 
      }

      docs += '</div>' +
      '</div>' +
      '</div>' +
      '<div class="col-xs-2 col-sm-2 saved-search-icon-container-height">' +
        '<div>' +
          '<div class="saved-search-icon-container" data-toggle="modal" data-target="#deleteModal" onclick="setSavedFilterIdDocumentSearch(\'' + filters[startArray].savedFilterId + '\')">' + trashCanSnippit +
        '</div>' +
      '</div>' +
      '</div>' +
      '<div class="col-xs-2 col-sm-2 saved-search-icon-container-height">' +
        '<div class="row">' +
          '<div class="saved-search-icon-container" onclick="redirectToSearchDocuments(' + filters[startArray].alternativeKey + ')">' + spyGlassSnippit +
        '</div>' +
      '</div>' +
      '</div>' +
      '</div>'

    if (startArray < filters.length && ++startArray !== filters.length) {
      docs += '<div class="container">' +
        '<div class="col-xs-12 col-sm-12 text-center" onclick="NextFiltersMobile(1)">' +
        '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10" viewBox="0 0 18 10" fill="none" class="saved-search-Image-arrow cursor-pointer">' +
        '<path fill-rule="evenodd" clip-rule="evenodd" d="M1.0574 0.80764C1.11545 0.749436 1.18442 0.703258 1.26035 0.671749C1.33629 0.640241 1.41769 0.624023 1.4999 0.624023C1.58211 0.624023 1.66351 0.640241 1.73944 0.671749C1.81537 0.703258 1.88434 0.749436 1.9424 0.80764L8.9999 7.86639L16.0574 0.80764C16.1155 0.74953 16.1845 0.703435 16.2604 0.671986C16.3363 0.640537 16.4177 0.624351 16.4999 0.624351C16.5821 0.624351 16.6635 0.640537 16.7394 0.671986C16.8153 0.703435 16.8843 0.74953 16.9424 0.80764C17.0005 0.86575 17.0466 0.934737 17.0781 1.01066C17.1095 1.08659 17.1257 1.16796 17.1257 1.25014C17.1257 1.33232 17.1095 1.4137 17.0781 1.48962C17.0466 1.56554 17.0005 1.63453 16.9424 1.69264L9.4424 9.19264C9.38434 9.25084 9.31537 9.29702 9.23944 9.32853C9.16351 9.36004 9.08211 9.37626 8.9999 9.37626C8.91769 9.37626 8.83629 9.36004 8.76036 9.32853C8.68442 9.29702 8.61545 9.25084 8.5574 9.19264L1.0574 1.69264C0.999193 1.63458 0.953014 1.56561 0.921506 1.48968C0.889998 1.41375 0.873779 1.33235 0.873779 1.25014C0.873779 1.16793 0.889998 1.08653 0.921506 1.0106C0.953014 0.934667 0.999193 0.865697 1.0574 0.80764Z" fill="black" />' +
        '</svg>' +
        '</div>' +
        '</div>'
    }
    $('#savedFiltersMobileWidget').empty();
    $("#savedFiltersMobileWidget").append(docs);
  }

  if (filters.length > 0) {
    $("#savedFiltersMobileWidget").css({ 'display': 'block' });
    $("#savedfilterMobileHeader").css({ 'display': 'flex' });
  } else {
    $("#savedFiltersMobileWidget").css({ 'display': 'none' });
  }
}


function NextFiltersMobile(increaseAmount) {
  SavedFilterMobileIndex = SavedFilterMobileIndex + increaseAmount;
  buildSavedFiltersMobile();
}

function PreviousFiltersMobile(decreaseAmount) {
  SavedFilterMobileIndex = SavedFilterMobileIndex - decreaseAmount;
  buildSavedFiltersMobile();
}

function addSavedFiltersSkeletonLoaderMobile() {
  if ($("#savedFiltersMobileWidget").hasClass('loading')) {
    $("#savedFiltersMobileWidget").removeClass('loading');
  } else {
    $("#savedFiltersMobileWidget").addClass('loading');
    $(function () {
      var itemsToHide = document.getElementsByClassName('saved-search-Image-size');

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

      $("#savedFiltersMobileWidget, #savedFiltersMobileWidget *")                  // 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
    });
  }
}

function addSavedFiltersSkeletonLoaderMobileLeaveText() {
  if ($("#savedFiltersMobileWidget").hasClass('loading')) {
    $("#savedFiltersMobileWidget").removeClass('loading');
  } else {
    $("#savedFiltersMobileWidget").addClass('loading');
  }
}

function NextFilters(increaseAmount) {
  SavedFilterIndex = SavedFilterIndex + increaseAmount;
  buildSavedFilters();
}

function PreviousFilters(decreaseAmount) {
  SavedFilterIndex = SavedFilterIndex - decreaseAmount;
  buildSavedFilters();
}

function addSavedFiltersSkeletonLoader() {
  if ($("#savedFiltersWidget").hasClass('loading')) {
    $("#savedFiltersWidget").removeClass('loading');
  } else {
    $("#savedFiltersWidget").addClass('loading');
    $(function () {
      var itemsToHide = document.getElementsByClassName('saved-search-Image-size');

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

      $("#savedFiltersWidget, #savedFiltersWidget *")                  // 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
    });
  }
}


function buildSavedFilters() {
  var startArray = SavedFilterIndex;
  var docs = "";
  if (startArray !== 0) {
    docs += '<div class="row padding-bottom-20">' +
      '<div class="col-md-12 text-center" onclick="PreviousFilters(3)">' +
      '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10" viewBox="0 0 18 10" fill="none" class="saved-search-Image-arrow cursor-pointer">' +
      '<path fill-rule="evenodd" clip-rule="evenodd" d="M8.55756 0.80764C8.61561 0.749436 8.68458 0.703258 8.76052 0.671749C8.83645 0.640241 8.91785 0.624023 9.00006 0.624023C9.08227 0.624023 9.16367 0.640241 9.2396 0.671749C9.31553 0.703258 9.3845 0.749436 9.44256 0.80764L16.9426 8.30764C17.0599 8.425 17.1258 8.58417 17.1258 8.75014C17.1258 8.91611 17.0599 9.07528 16.9426 9.19264C16.8252 9.31 16.666 9.37593 16.5001 9.37593C16.3341 9.37593 16.1749 9.31 16.0576 9.19264L9.00006 2.13389L1.94256 9.19264C1.8252 9.31 1.66603 9.37593 1.50006 9.37593C1.33409 9.37593 1.17492 9.31 1.05756 9.19264C0.940199 9.07528 0.874268 8.91611 0.874268 8.75014C0.874268 8.58417 0.940199 8.425 1.05756 8.30764L8.55756 0.80764Z" fill="black" />' +
      '</svg>' +
      '</div>' +
      '</div>'
  }

  for (let index = 0; index < 3; index++) {
    if (startArray >= filters.length) {
      break;
    };
    var types = "";
    var array = filters[startArray].filterData["DocumentTypes"];
    for (let index = 0; index < array.length; index++) {
      types += array[index].name + ", ";
    }

    docs += '<div class="row">' +
      '<div class="container saved-search-white-container" tabindex="0"> ' +
      '<div class="col-md-8" style="padding-top: 8px;">' +
      '<div class="row">' +
      '<div style="font-size: 16px; font-weight: 700;">' + filters[startArray].filterName + '</div>' +
      '</div>' +
      '<div class="row">' +
      '<div class="saved-search-text">'
      if (filters[startArray].filterData.dateRange == "") {
        if(filters[startArray].filterData.documentDateStart && filters[startArray].filterData.documentDateEnd){
          docs += [filters[startArray].filterData.documentCategoryName,
          types,
          filters[startArray].filterData.productName,
          filters[startArray].filterData.accountName,
          filters[startArray].filterData.clientName,
          new Date(filters[startArray].filterData.documentDateStart).toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "short" }),
          new Date(filters[startArray].filterData.documentDateEnd).toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "short" })
          ].filter(element => Boolean(element)).join(', ');
        } else if(filters[startArray].filterData.documentDateStart) {
          docs += [filters[startArray].filterData.documentCategoryName,
          types,
          filters[startArray].filterData.productName,
          filters[startArray].filterData.accountName,
          filters[startArray].filterData.clientName,
          new Date(filters[startArray].filterData.documentDateStart).toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "short" }),
          ].filter(element => Boolean(element)).join(', ');
        }else if(filters[startArray].filterData.documentDateEnd){
          docs += [filters[startArray].filterData.documentCategoryName,
          types,
          filters[startArray].filterData.productName,
          filters[startArray].filterData.accountName,
          filters[startArray].filterData.clientName,
          new Date(filters[startArray].filterData.documentDateEnd).toLocaleDateString("en-AU", { day: "numeric", year: "numeric", month: "short" }),
          ].filter(element => Boolean(element)).join(', ');
        }else{
          docs += [filters[startArray].filterData.documentCategoryName,
          types,
          filters[startArray].filterData.productName,
          filters[startArray].filterData.accountName,
          filters[startArray].filterData.clientName,
          ].filter(element => Boolean(element)).join(', ');
        }
      } else {
        docs += [filters[startArray].filterData.documentCategoryName,
        types,
        filters[startArray].filterData.productName,
        filters[startArray].filterData.accountName,
        filters[startArray].filterData.clientName,
        filters[startArray].filterData.dateRangeName].filter(element => Boolean(element)).join(', ')
      }

      docs += '</div>' +
      '</div>' +
      '</div>' +
      '<div class="col-md-2 saved-search-icon-container-height" style="margin-left: 28px;" > ' +
      '<div class="row cursor-pointer button-container" data-toggle="modal" data-target="#deleteModal" role="button" tabindex="0" onclick="setSavedFilterIdDocumentSearch(\'' + filters[startArray].savedFilterId + '\') ">' + trashCanSnippit +
      '</div>' +
      '</div>' +
      '<div class="col-md-1 saved-search-icon-container-height">' +
      '<div class="row cursor-pointer button-container" role="button" tabindex="0" onclick="redirectToSearchDocuments(' + filters[startArray].alternativeKey + ')">' + spyGlassSnippit +
      '</div>' + 
      '</div>' +
      '</div>' +
      '</div>';

    startArray++
  }

  if (startArray < filters.length) {

    docs += '<div class="row">' +
      '<div class="col-md-12 text-center" onclick="NextFilters(3)">' +
      '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10" viewBox="0 0 18 10" fill="none" class="saved-search-Image-arrow cursor-pointer">' +
      '<path fill-rule="evenodd" clip-rule="evenodd" d="M1.0574 0.80764C1.11545 0.749436 1.18442 0.703258 1.26035 0.671749C1.33629 0.640241 1.41769 0.624023 1.4999 0.624023C1.58211 0.624023 1.66351 0.640241 1.73944 0.671749C1.81537 0.703258 1.88434 0.749436 1.9424 0.80764L8.9999 7.86639L16.0574 0.80764C16.1155 0.74953 16.1845 0.703435 16.2604 0.671986C16.3363 0.640537 16.4177 0.624351 16.4999 0.624351C16.5821 0.624351 16.6635 0.640537 16.7394 0.671986C16.8153 0.703435 16.8843 0.74953 16.9424 0.80764C17.0005 0.86575 17.0466 0.934737 17.0781 1.01066C17.1095 1.08659 17.1257 1.16796 17.1257 1.25014C17.1257 1.33232 17.1095 1.4137 17.0781 1.48962C17.0466 1.56554 17.0005 1.63453 16.9424 1.69264L9.4424 9.19264C9.38434 9.25084 9.31537 9.29702 9.23944 9.32853C9.16351 9.36004 9.08211 9.37626 8.9999 9.37626C8.91769 9.37626 8.83629 9.36004 8.76036 9.32853C8.68442 9.29702 8.61545 9.25084 8.5574 9.19264L1.0574 1.69264C0.999193 1.63458 0.953014 1.56561 0.921506 1.48968C0.889998 1.41375 0.873779 1.33235 0.873779 1.25014C0.873779 1.16793 0.889998 1.08653 0.921506 1.0106C0.953014 0.934667 0.999193 0.865697 1.0574 0.80764Z" fill="black" />' +
      '</svg>' +
      '</div>' +
      '</div>';
  }
  $('#savedFiltersWidget').empty();
  $("#savedFiltersWidget").append(docs);
  $('.button-container').keypress(function(event) {
    // If the pressed key was 'Enter'
    if (event.which == 13) {
      // Trigger a click event on the button
      $(this).click();
    }
  });
  if (filters.length > 0) {
    $("#savedfilterheader").css({ 'display': 'block' });
    $("#savedfiltergreybox").css({ 'display': 'block' });
  } else {
    $("#savedfilterheader").css({ 'display': 'none' });
    $("#savedfiltergreybox").css({ 'display': 'none' });
  }

}



function setSavedFilterIdDocumentSearch(id) {
  savedFilterId = id;
}