// Get the close button
//var closeButton = document.getElementsByClassName("close-viewer")[0];

// When the close button is clicked, close the modal
function closemodal() {
  document.body.style.overflow = 'visible';
  document.getElementById("documentViewer").style.display = "none";
  document.getElementById("document-viewer-Overlay").style.display = "none";
  document.getElementById("document-placeholder").innerHTML = "";
  document.getElementById("loadingBox").style.display = "block";
  document.getElementById("document-name").innerHTML = "";
}

async function View(isKendoGrid, isHelpPreview, isForm, isMobile) {

  let selectedDocuments = [];
  if (isKendoGrid === true) {

    var grid = $("#grid").data("kendoGrid");

    var rows = grid.select();

    $(rows).each(function () {
      selectedDocuments.push(grid.dataItem(this).deepLink);
    });
  } else {
    selectedDocuments = $('input[name="documentCheckBox"]:checked').map(function () {
      return $(this).val();
    }).get();
  }

  if (selectedDocuments.length === 0) {
    alert("Please select one or more documents.");
  }
  else if (selectedDocuments.length > 5) {
    GenerateErrorModal();

  } else {
    document.body.style.overflow = 'hidden';
    document.getElementById("documentViewer").style.display = "block";
    document.getElementById("document-viewer-Overlay").style.display = "block";
    // Initialize local variables to store the selected documents and the current document index
    let documents = [];
    let currentIndex = 0;

    if (selectedDocuments.length > 1) {
      await selectedDocuments.forEach(async deepLink => {
        if (isHelpPreview === true) {
          deepLink += "&helpPreview=true"
        }
        if(isForm === true){
          deepLink += "&form=true"
        }
        try {
          var request = await SendRequest('GET', deepLink);
          var json = JSON.parse(request.response);
          json.deepLink = deepLink;
          documents.push(json);
          displayDocument(documents, currentIndex, isMobile);
        } catch (e) {
          var json = {};
          json.base64File = "";
          json.fileName = "";
          json.mimeType = "";
          json.documentName = "";
          json.deepLink = "";
          documents.push(json);
          displayDocument(documents, currentIndex, isMobile);
        }

      });
    } else {
      var deepLink = selectedDocuments[0];
      if (isHelpPreview === true) {
        deepLink += "&helpPreview=true"
      }
      if(isForm === true){
        deepLink += "&form=true"
      }
      try {
        var request = await SendRequest('GET', deepLink);
        var json = JSON.parse(request.response);
        json.deepLink = deepLink;
        documents.push(json);
        displayDocument(documents, currentIndex, isMobile);
      }
      catch (e) {
        document.getElementById("loadingBox").style.display = "none";
        let placeholder = document.getElementById("document-placeholder");
        placeholder.innerHTML = `<p style="color:red;">Something went wrong. If this issue persists, please contact clientservices@qic.com</p>`;
      }
    }

    document.getElementById("documentViewer").style.display = "block";
    document.getElementById("document-viewer-Overlay").style.display = "block";
  }
}

function GenerateErrorModal() {
  let modalHTML =
    `
  <div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content" style="max-width: 464px">
      <div class="modal-header modal-head-purple">
        <p class="modal-title modal-head-title" id="exampleModalLabel">Caution</p>
      </div>
      
      <div id="deleteTextModal" class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12 confirmationText">
            You can not preview more than 5 documents at a time.
            </div>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <div id="saveFilterButtonsModal">
          <div id="deleteButtons" class="row">
            <div class="col-md-12">
              <button type="button" class="btn btn-secondary modal-cancel-button" data-dismiss="modal"
                style="width: 100%; margin-bottom: 20px;">OK</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  `;
  $("body").append(modalHTML);
  $("#error-modal").modal("show");
}

async function ViewMobile(deepLink) {
  if (deepLink === "") {
    alert("Please select one or more documents.");
  }
  else {
    document.getElementById("documentViewer").style.display = "block";
    document.getElementById("document-viewer-Overlay").style.display = "block";
    // Initialize local variables to store the selected documents and the current document index
    let documents = [];
    let currentIndex = 0;
    try {
      var request = await SendRequest('GET', deepLink);
      var json = JSON.parse(request.response);
      json.deepLink = deepLink;
      documents.push(json);
      displayDocument(documents, currentIndex, true);
    } catch (ex) {
      var json = {};
      json.base64File = "";
      json.fileName = "";
      json.mimeType = "";
      json.documentName = "";
      json.deepLink = "";
      documents.push(json);
      displayDocument(documents, currentIndex, true);
    }
  }
}



function showFallbackMessage(iframe) {
  let fallbackMessage = document.getElementById("iframe-fallback-message");
  if (fallbackMessage) {
    fallbackMessage.style.display = "block";
  }
  iframe.style.display = "none";
}


function displayDocument(documents, currentIndex, isMobile) {
  // Check if there are any documents in the `documents` array
  if (documents.length !== 0) {

    // Hide the loading indicator
    document.getElementById("loadingBox").style.display = "none";
    // Get a reference to the element that will display the document
    let placeholder = document.getElementById("document-placeholder");
    if (documents[currentIndex].deepLink.length == 0) {
      placeholder.innerHTML = `<p style="color:red;">Something went wrong. If this issue persists, please contact clientservices@qic.com</p>`;
    } else {
      // Set the name of the document in the UI
      document.getElementById("document-name").innerHTML = documents[currentIndex].documentName;
      var deepLink = documents[currentIndex].deepLink;

      // Get the mime type of the document
      let mimeType = documents[currentIndex].mimeType;

      if (mimeType === "application/pdf") {
        var documentBuffer = _base64ToArrayBuffer(documents[currentIndex].base64File);
        let blob = new Blob([documentBuffer], {
          type: mimeType,
        });
        var blobUrl = window.URL.createObjectURL(blob);
        if (!isMobile) {
          // Display a PDF document using an iframe
          placeholder.innerHTML = `<iframe src="${blobUrl}#toolbar=0" id="Previewer-${currentIndex}" style="border: none; width: 100%; height: 500px; max-height: 700px;"></iframe>`;
        }
      }
      else {
        if(!isMobile){
          placeholder.innerHTML = `<div id="iframe-fallback-message-type" margin-top: 20px;">
          <p>This file type does not support previewing. Please download the document to view it.</p>
         </div>`
        }
      }
    }
    // Add page count text
    placeholder.innerHTML += `
      <div id="page-count" style="display: flex; justify-content: flex-end; margin-top: 10px; font-size: 14px;">
       Document ${currentIndex + 1} of ${documents.length}
      </div>`;

    if (documents[currentIndex].deepLink.length != 0) {
      placeholder.innerHTML += `
      <div class="hidden-sm hidden-xs hidden-md" id="button-container" style="display: flex; justify-content: flex-end; margin-top: 10px; float: left;">
        <button id="download-button-${currentIndex}" style="background-color: black; color: white; padding: 10px 20px; margin-right:5px" onclick="PreviewerDownload(event,'${deepLink}')">Download</button>
      </div>`;
    }

    if (documents.length == 1) {


      // Additional check using setTimeout to handle cases where the "load" event is not fired
      setTimeout(function () {
        if (isMobile) {

          document.getElementById("page-count").style.display = "none";
          placeholder.innerHTML += `
          <div id="iframe-fallback-message-${currentIndex}" margin-top: 20px;">
           <p>Your device does not support previewing. Please download the document to view it.</p>
           <button id="download-button-iframe-${currentIndex}" style="background-color: black; color: white; padding: 10px 20px;" onclick="PreviewerDownload(event,'${deepLink}')">Download</button>
          </div>`;

        }
      }, 4000);
    }

    // Check if there is more than one document
    if (documents.length > 1) {
      // Display navigation buttons if there is more than one document
      placeholder.innerHTML += `
        <div id="button-container" style="display: flex; justify-content: flex-end; margin-top: 10px;">
          <button id="prev-button" ${currentIndex === 0 ? 'disabled' : ''} style="background-color: black; color: white; padding: 10px 20px; margin-right:5px">Prev</button>
          <button id="next-button" ${currentIndex === documents.length - 1 ? 'disabled' : ''} style="background-color: black; color: white; padding: 10px 20px;">Next</button>
        </div>`;
      // Add click event listener to prev button
      document.getElementById("prev-button").addEventListener("click", function () {
        currentIndex--;
        displayDocument(documents, currentIndex);
      });
      // Add click event listener to next button
      document.getElementById("next-button").addEventListener("click", function () {
        currentIndex++;
        displayDocument(documents, currentIndex);
      });
    }
  }
}

function createFallbackMessage(deepLink) {
  let fallbackMessage = document.createElement("div");
  fallbackMessage.id = "iframe-fallback-message";
  fallbackMessage.style.display = "block";
  fallbackMessage.style.marginTop = "20px";
  fallbackMessage.innerHTML = `
    <p>Your device does not support previewing. Please download the document to view it.</p>
    <button id="download-button" style="background-color: black; color: white; padding: 10px 20px;" onclick="PreviewerDownload('${deepLink}')">Download</button>
  `;
  return fallbackMessage;
}



// Convert to base 64 array 
function _base64ToArrayBuffer(base64) {
  var binary_string = window.atob(base64);
  var len = binary_string.length;
  var bytes = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

async function PreviewerDownload(event, deeplink) {
  var downloadButton = event.target; // Get the clicked download button element
  downloadButton.textContent = "Downloading..."; 

  var request = await SendRequest('GET', deeplink + "&download=true");
  var json = JSON.parse(request.response);

  const binaryData = atob(json.base64File);
  const binaryDataLength = binaryData.length;
  const byteArray = new Uint8Array(binaryDataLength);
  for (let i = 0; i < binaryDataLength; i++) {
    byteArray[i] = binaryData.charCodeAt(i);
  }

  const blob = new Blob([byteArray], { type: json.mimeType });

  const blobUrl = URL.createObjectURL(blob);

  const downloadLink = document.createElement("a");
  const fileName = json.fileName;
  downloadLink.href = blobUrl;
  downloadLink.download = fileName;
  
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);

  downloadButton.textContent = "Download"; // Restore button text to "Download" after file is downloaded
}


async function Download(isKendoGrid, isHelpPreview, isForm) {
  downloadButton
  var downloadButton = document.getElementById("downloadButton");
  var ogButton = downloadButton.innerHTML;
  downloadButton.disabled = true;
  downloadButton.innerHTML = "<i style='display: inline-block' class='fa fa-spinner fa-spin'></i> Downloading...";
  let selectedDocuments = [];
  if (isKendoGrid === true) {

    var grid = $("#grid").data("kendoGrid");
    var rows = grid.select();

    $(rows).each(function () {
      selectedDocuments.push(grid.dataItem(this).deepLink);
    });
  } else {
    selectedDocuments = $('input[name="documentCheckBox"]:checked').map(function () {
      return $(this).val()
    }).get()
  }
  var requestUrl = baseUrl + 'portalfile/Multiple';
  try {
    if (selectedDocuments.length > 1) {
      if (isHelpPreview === true) {
        requestUrl += "?helpPreview=true"
      }
      if (isForm === true) {
        requestUrl += "?form=true"
      }
      var LinksJson = { idList: selectedDocuments }
      var request = await SendRequest('POST', requestUrl, LinksJson);
      var json = JSON.parse(request.response);
      const linkSource = `data:${json.mimeType};base64,${json.base64File}`;
      const downloadLink = document.createElement("a");
      const fileName = json.fileName;
      downloadLink.href = linkSource;
      downloadLink.download = fileName;
      downloadLink.click();
    } else {
      if (isHelpPreview === true) {
        selectedDocuments += "&helpPreview=true"
      }
      if (isForm === true) {
        selectedDocuments += "&form=true"
      }
      var request = await SendRequest('GET', selectedDocuments + "&download=true");
      var json = JSON.parse(request.response);
      const linkSource = `data:${json.mimeType};base64,${json.base64File}`;
      const downloadLink = document.createElement("a");
      const fileName = json.fileName;
      downloadLink.href = linkSource;
      downloadLink.download = fileName;
      downloadLink.click();
    }
  } catch (e) {
    downloadButton.disabled = false;
    downloadButton.innerHTML = ogButton
  }

  downloadButton.disabled = false;
  downloadButton.innerHTML = ogButton
}

function decodeBase64(base64) {
  return atob(base64);
}