{% extends "admin/change_form.html" %}
{% load i18n admin_urls %}
{% load static %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    #overlay {
      color: white;
      background: rgba(0, 0, 0, .5);
      height: 100vh;
      font-size: 3rem;
      left: 0;
      position: absolute;
      text-align: center;
      top: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .hide-overlay {
      display: none !important;
    }
    #overlay-progress-container {
      height: 32px;
    }
    #overlay-warning-container {
      margin-top: 3rem;
      width: 50%;
    }
    .overlay-warning {
      font-size: 1rem;
      color: white !important;
    }
  </style>
{% endblock %}
{% block submit_buttons_bottom %}
  <div class="submit-row">
    <input type="submit" value="{% trans 'Save and add another' %}" id="add_another" name="_addanother" {{ onclick_attrib }}/>
    <input type="submit" value="{% trans 'Save' %}" class="default" id="start_upload" name="_save">
  </div>
{% endblock %}
{% block admin_change_form_document_ready %}
  {{ block.super }}
  <script type="text/javascript">

    // for each form on the page...
    let bulkForm = django.jQuery('#bulk_form'); // define context and reference
    django.jQuery("input:submit", bulkForm).bind("click keypress", function ()
    {
        bulkForm.data("callerid", this.id);
    });
    bulkForm.on('submit', (e) => {
      e.preventDefault();

      const overlay = django.jQuery('#overlay');
      const label = document.getElementById('overlay-label');
      const percentage = document.getElementById('overlay-percentage');
      const progressBar = document.getElementById('overlay-progress');
      const buttonUsed = django.jQuery('#bulk_form').data("callerid");

      // Set up POST req
      const form = e.currentTarget;
      const url = form.action;
      let xhr = new XMLHttpRequest();

      // Add event handlers
      xhr.upload.onloadstart = (e) => {
        // Show overlay
        overlay.removeClass('hide-overlay');
        percentage.textContent = '0%';
        label.textContent = 'Uploading...';
      };

      xhr.upload.onprogress = (e) => {
        const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0;
        progressBar.value = percent.toFixed(2);
        progressBar.setAttribute('aria-valuenow', percent.toFixed(2));
        percentage.textContent = percent.toFixed(2) + '%';
      };

      xhr.upload.onloadend = (e) => {
        label.textContent = 'Upload complete, please wait...';
      }

      function handleError (e) {
        errored = true;
        label.textContent = 'Error: Please see dev tools console for details';
      }

      xhr.upload.addEventListener('abort', handleError);
      xhr.upload.addEventListener('error', handleError);
      xhr.addEventListener('abort', handleError);
      xhr.addEventListener('error', handleError);

      xhr.onreadystatechange = (e) => {
        if (xhr.readyState == XMLHttpRequest.DONE) {
          if (buttonUsed === 'start_upload') {
            location.href = '/admin/ingest/ingesttaskwatcher/';
          } else {
            location.reload();
          }
        }
      }
      // Send POST req
      xhr.open('POST', url, true);
      xhr.send(new FormData(form));
    })
  </script>
{% endblock %}
{% block content %}
  {{ block.super }}
  <div id="overlay" class="hide-overlay">
    <div id="overlay-label">Uploading...</div>
    <div id="overlay-percentage">0%</div>
    <div id="overlay-progress-container">
      <progress id="overlay-progress" value="0" max="100"></progress>
    </div>
    <div id="overlay-warning-container">
      <p class="overlay-warning">
        <strong>You must leave this window open during upload.</strong>
      </p>
      <p class="overlay-warning">
        Once upload completes, you will be sent to a new page.
        You may then navigate away while the rest of the ingest completes; you
        will receive an email to notify you when the ingest has completed.
      </p>
    </div>
  </div>
{% endblock %}