{% extends "wagtailadmin/base.html" %}
{% load common_filters %}
{% load common_tags %}
{% load i18n %}

{% block extra_css %}
  <style>
    .errorlist {
      position: relative;
      padding-left: 20px;
      color: #f00;
    }
    .errorlist::before {
      content: '❌';
      display: block;
      position: absolute;
      top: 2px;
      left: 0;
    }
    .export-section .errorlist {
      white-space: pre-line;
    }

    .hidden {
      display: none !important;
    }

    .import-title,
    .current-imports,
    .current-imports > span {
      display: inline-block;
      vertical-align: middle;
    }
    @keyframes current-import-spinner {
      to {
        transform: rotate(360deg);
      }
    }
    .current-import-spinner {
      box-sizing: border-box;
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-left: 10px;
      border-bottom: 2px solid;
      border-left: 2px solid;
      border-right: 0;
      border-radius: 50%;
      animation: current-import-spinner 0.5s linear 0s infinite;
    }
    .current-import-text {
      margin-left: 0.25em;
    }

    .status-output {
      height: 14em;
      padding: 1em 1.25em;
      border-radius: 4px;
      overflow: auto;
      resize: vertical;
      background: #333;
      color: #fff;
      white-space: pre;
      font-family: Consolas, monospace;
      font-size: 12px;
    }
    .warning .status-text {
      font-weight: bold;
    }

    [type="submit"] {
      margin-top: 1em;
    }
  </style>
{% endblock %}

{% block extra_js %}
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      if (!window.fetch) {
        return;
      }

      // formatStr('Hi {name}', { name: 'Joe' });
      function formatStr(str, args) {
        let newStr = str;
        for (const arg in args) {
          if (args.hasOwnProperty(arg)) {
            newStr = newStr.replace(new RegExp('{' + arg + '}', 'g'), args[arg]);
          }
        }
        return newStr;
      }

      // Format as 2012-12-31 23:37:42
      function formatDate(date) {
        const dateStr = date.toISOString().split(/T/);
        return dateStr[0] + ' ' + dateStr[1].replace(/\.\d+Z?$/, '');
      }

      function setConditionalClass(el, className, shouldSet) {
        if (shouldSet) {
          el.classList.add(className);
        } else {
          el.classList.remove(className);
        }
      }

      function setImportProgress(importJobs) {
        const spinner = document.querySelector('.current-import-spinner');
        const text = document.querySelector('.current-import-text');
        const jobs = importJobs.filter(function (job) {
          return job.is_queued || job.is_started;
        });
        const jobCount = jobs.length;
        if (jobCount) {
          let statusText = '';
          if (jobCount === 1) {
            statusText = formatStr(
              '{{ text.single_job }}',
              { lang: jobs[0].name }
            );
          } else {
            statusText = formatStr(
              '{{ text.multi_job }}',
              {
                count: jobCount,
                lang: jobs.map(function (job) { return job.name; }).join(', ')
              }
            );
          }
          text.innerText = statusText;
          spinner.classList.remove('hidden');
        } else {
          text.innerText = '';
          spinner.classList.add('hidden');
        }
      }

      function setJobStatus(importJobs) {
        importJobs.forEach(function (job) {
          const desc = document.querySelector('.status-desc--' + job.code);
          const text = document.querySelector('.status-text--' + job.code);
          const time = document.querySelector('.status-time--' + job.code);
          const output = document.querySelector('.status-output--' + job.code);

          if (job.is_failed) {
            text.innerText = '{{ text.job_failed }}';
          } else if (job.is_finished) {
            text.innerText = job.has_warning
              ? '⚠️ {{ text.job_finished_warning }}'
              : '{{ text.job_finished }}';
          } else {
            text.innerText = '';
          }

          if (job.ended_at) {
            // Add Z to prevent conversion to UTC time
            time.innerText = formatDate(new Date(job.ended_at + 'Z'));
          } else {
            time.innerText = '';
          }

          if (job.exc_info) {
            output.innerText = job.exc_info;
          } else if (job.result) {
            output.innerText = job.result;
          }

          setConditionalClass(desc, 'errorlist', job.is_failed === true);
          setConditionalClass(output, 'hidden', !job.exc_info && !job.result);
        });
      }

      function checkImportStatus() {
        fetch(window.location.pathname + '?check_status')
          .then(function (response) {
            return response.json();
          })
          .then(function (json) {
            setImportProgress(json.importJobs);
            setJobStatus(json.importJobs);
          });
      }

      // Start or stop continuous status polling depending on if the browser
      // tab has focus or not.
      let pollingTimer = null;
      function startOrStopPolling() {
        if (document.hidden && pollingTimer) {
          clearInterval(pollingTimer);
          pollingTimer = null;
        } else if (!document.hidden && !pollingTimer) {
          pollingTimer = setInterval(checkImportStatus, 5000);
        }
      }

      // Run once right after page load.
      setTimeout(checkImportStatus, 500);
      startOrStopPolling();
      document.addEventListener('visibilitychange', function () {
        startOrStopPolling();
      }, false);

      // Expose for debugging
      window.checkImportStatus = checkImportStatus;
    });
  </script>
{% endblock %}

{% block content %}
  <header class="nice-padding">
    <h1 class="icon icon-site">{% trans "Translations" %}</h1>
  </header>

  <div class="nice-padding">
    <div class="export-section">
      <h2>{% trans "Export" %}</h2>
      <p>{% blocktrans %}Export XML with texts for {{ default_lang_name }}.{% endblocktrans %}</p>
      <form action="{{ request.path }}?form=export" method="post">
        {% csrf_token %}
        {{ language_export_form.as_p }}
        <input class="button" type="submit" value="{% trans 'Export' context "verb" %}">
      </form>
    </div>

    <hr>

    <div class="import-section">
      <h2 class="import-title">{% trans "Import" %}</h2>
      {% with import_count=import_job_names|length %}
        <div class="current-imports">
          <span class="current-import-spinner{% if not import_count %} hidden{% endif %}"></span>
          <span class="current-import-text">
            {% if import_count == 1 %}
              {% dict lang=import_job_names.0 as lang_text %}
              {{ text.single_job|format_named:lang_text }}
            {% elif import_count > 1 %}
              {% dict lang=import_job_names|join:", " count=import_count as lang_text %}
              {{ text.multi_job|format_named:lang_text }}
            {% endif %}
          </span>
        </div>
      {% endwith %}
      <p>{% blocktrans %}Import XML with translations for {{ default_lang_name }}.{% endblocktrans %}</p>
      <form action="{{ request.path }}?form=import" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% for field in import_language_import_form %}
          <p>
            {{ field.errors }}
            {{ field.label_tag }}
            {{ field }}

            {% comment %} TODO: Shouldn't need get filter, use dot notation {% endcomment %}
            {% with job=import_status|get:field.field.language_code %}
              <p class="status-desc status-desc--{{ job.code }}{% if job.is_failed %} errorlist{% elif job.has_warning %} warning{% endif %}">
                <span class="status-text status-text--{{ job.code }}">
                  {% if job.is_failed %}
                    {{ text.job_failed }}
                  {% elif job.is_finished %}
                    {% if job.has_warning %}
                      ⚠️ {{ text.job_finished_warning }}
                    {% else %}
                      {{ text.job_finished }}
                    {% endif %}
                  {% endif %}
                </span>
                <span class="status-time status-time--{{ job.code }}">{{ job.ended_at|date:"Y-m-d H:i:s" }}</span>
              </p>
              {% comment %} Don't add whitespace, it will show due to white-space: pre; {% endcomment %}
              <div class="status-output status-output--{{ job.code }}{% if not job.exc_info and not job.result %} hidden{% endif %}">{% if job.exc_info %}{{ job.exc_info }}{% else %}{{ job.result }}{% endif %}</div>
            {% endwith %}
          </p>
        {% endfor %}

        <input class="button" type="submit" value="{% trans 'Import' context "verb" %}">
      </form>
    </div>
  </div>
{% endblock %}