{% load i18n %}
{% load static %}
{% load crispy_forms_tags %}

{% block content %}
  <div class="modal" tabindex="-1" role="dialog" id="export-progress-modal">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="background-color: white">
        <div class="modal-header">
          <h5 class="modal-title">{% trans "core.templates.core.export-modal.title" %}</h5>
        </div>
        <div class="modal-body">
          <div class="progress mb-3">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"
                 aria-valuenow="0"
                 aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          {% if table.rows|length >= 50000 %}
            {% if request.user.is_superuser %}
              <p id="modal-confirm-download-par">{% trans "core.templates.core.export_modal.confirm_download" %}</p>
            {% else %}
              <p>{% trans "core.templates.core.export_modal.too_many_rows" %}</p>
            {% endif %}
          {% endif %}
          <p id="export-progress-model-file-being-generated"
             {% if table.rows|length >= 50000 %}style="display: none"{% endif %}>
            {% trans "core.templates.core.export_modal.file_being_generated" %}
          </p>
          <p id="export-progress-model-generated" style="display: none">
            {% trans "core.templates.core.export_modal.file_generated" %}
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" id="export-progress-modal-button-cancel" class="btn btn-secondary"
                  data-dismiss="modal">{% trans "core.templates.core.export-modal.cancel" %}</button>
        </div>
      </div>
    </div>
  </div>
  <script>
      const updateProgressBar = (progressPercentage = 0) => {
          const progressBar = document.querySelector('#export-progress-modal .progress-bar');
          if (progressBar) {
              progressBar.style.width = progressPercentage + '%';
              progressBar.setAttribute('aria-valuenow', progressPercentage);
          }
          if (progressPercentage >= 80) {
              const parBeingGenerated = document.getElementById('export-progress-model-file-being-generated');
              parBeingGenerated.style.display = "none";
              const parGenerated = document.getElementById('export-progress-model-generated');
              parGenerated.style.display = null;
          }
      }
      
      const controller = new AbortController();
      const signal = controller.signal;

      const manageExportDownload = (downloadUrl, redis_variable_name) => {
          let downloadFinished = false;
          
          document.addEventListener('downloadStart', () => {
              const parBeingGenerated = document.getElementById('export-progress-model-file-being-generated');
              parBeingGenerated.style.display = null;
          });

          document.addEventListener('downloadComplete', () => {
              updateProgressBar(100);
              downloadFinished = true;
              fetch(`{% url 'core:delete_temp_value' %}?temp_name=${redis_variable_name}`)
                  .catch(error => console.error('Error in Check Value Function:', error));
              setTimeout(() => {
                  $('#export-progress-modal').modal('hide')
                  const parGenerated = document.getElementById('export-progress-model-generated')
                  parGenerated.style.display = "none"
              }, 500);
          });
          
          const downloadStartEvent = new Event('downloadStart');
          document.dispatchEvent(downloadStartEvent);
          
          const getFileName = target_link => {
              if (target_link.includes("export=csv")) {
                  return "export.csv"
              }
              if (target_link.includes("export=json")) {
                  return "export.json"
              }
              if (target_link.includes("export=xlsx")) {
                  return "export.xlsx"
              }
          }
          const file_name = getFileName(downloadUrl)

          const checkDownloadStatus = () => {
              fetch(`{% url 'core:read_temp_value' %}?temp_name=${redis_variable_name}`)
                  .then(response => response.json())
                  .then(data => {
                      updateProgressBar(data.value);
                      if (downloadFinished) {
                          clearInterval(intervalId);
                      }
                  })
                  .catch(error => console.error('Error in Check Value Function:', error));
          }
          
          const updateRedisDownloadAbort = () => {
              fetch(`{% url 'core:abort_download_update_temp_value' %}?temp_name=${redis_variable_name}`)
                  .catch(error => console.error('Error in reset function:', error));
          }


          const intervalId = setInterval(() => {
              if (!downloadFinished) {
                  checkDownloadStatus();
              }
          }, 1000);

          fetch(`{% url 'core:read_temp_value' %}?temp_name=${redis_variable_name}`)
              .then(response => response.json())
              .then(data => {
                  updateProgressBar(data.value);
              })
              .catch(error => console.error('Error in Check Value Function:', error));

          fetch(downloadUrl, {signal})
              .then(response => {
                  if (!response.ok) throw new Error('Network response was not ok.');
                  return response.blob();
              })
              .then(blob => {
                  const downloadLink = document.createElement('a');
                  downloadLink.href = URL.createObjectURL(blob);
                  downloadLink.download = file_name;
                  downloadLink.click();
                  URL.revokeObjectURL(downloadLink.href);
              })
              .then(() => {
                  const downloadCompleteEvent = new Event('downloadComplete');
                  document.dispatchEvent(downloadCompleteEvent);
              })
              .catch(error => {
                  if (error === 'AbortedByUser') {
                      console.log('Fetch request was aborted');
                  } else {
                      console.error('Fetch error:', error);
                  }
              })
          
          document.getElementById('export-progress-modal-button-cancel').addEventListener('click', () => {
              updateRedisDownloadAbort()
              controller.abort("AbortedByUser")
              location.reload()
          })
      };


  </script>
{% endblock %}