{% extends 'base.html' %}
{% load i18n %}
{% block body %}
<h4>{% trans "Management for:" %} <em>{{ key }}</em></h4>
<div class="row">
  <div class="col s12">
    <ul class="tabs config-overview">
      <li class="tab col s4"><a class="active" href="#overview"><i class="material-icons">info</i>
          {% trans "Overview" %}</a></li>
      <li class="tab col s4"><a href="#config"><i class="material-icons">settings</i> {%trans "Configuration" %}</a>
      </li>
      <li class="tab col s4"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a>
      </li>
    </ul>
  </div>
  <div id="overview" class="col s12">
    <div class="section">
      <h5>{% trans "Getting Started" %}</h5>
      <ol>
        <li>
          {% blocktrans %}
          Here is where you can store your Apprise configuration associated with the key <code>{{key}}</code>.
          {% endblocktrans %}
        </li>
        <li>
          {% blocktrans %}
          You can always refer to the
          <a href="https://github.com/caronc/apprise/wiki#notification-services">Apprise Wiki</a> if you're having
          troubles
          assembling your URL(s).
          {% endblocktrans %}
        </li>
        <li>
          {% blocktrans %}
          In the future you can return to this configuration screen at any time by placing the following into your
          browser:
          {% endblocktrans %}
          <code>{{request.scheme}}://{{request.META.HTTP_HOST}}{{request.path}}</code>
        </li>
      </ol>
    </div>
    <div class="section no-config">
      <div class="divider"></div>
      <p><strong>
          {% blocktrans %}To get started, the first thing you want to do is define your configuration. Do this by
          clicking
          on the <i>Configuration tab</i>.
          {% endblocktrans %}
        </strong></p>
      <div class="divider"></div>
    </div>
    <div class="has-config">
      <div class="section">
        <h5>{% trans "Working With Your Configuration" %}</h5>
        {% blocktrans %}The following command would cause apprise to retrieve the configuration loaded and
        send a test notification to all of your added services:{% endblocktrans %}
        <br />
        <pre><code class="bash">apprise --body="Test Message" --tag=all \<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;--config={{request.scheme}}://{{request.META.HTTP_HOST}}{% url "get" key %}</code></pre>
      </div>
      <div class="section">
        <h5>{% trans "Loaded Configuration" %}</h5>
        <div id="url-list"></div>
        <div id="url-list-progress" class="progress" style="width:70%">
          <div class="indeterminate"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="config" class="col s12">
    <p>
      {% blocktrans %}Define your configuration below:{% endblocktrans %}
      <form id="addconfig" action="{% url "add" key %}" method="post">
        {{ form_cfg }}
        <button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Save Configuration" %}
          <i class="material-icons right">save</i>
        </button>
      </form>
    </p>
  </div>
  <div id="notify" class="col s12">
    <p>
      {% blocktrans %}
      You can send a notification using the loaded configuration:
      {% endblocktrans %}
      <form id="donotify" action="{% url "notify" key %}" method="post">
        {{ form_notify }}
        <button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Send Notification" %}
          <i class="material-icons right">send</i>
        </button>
      </form>
    </p>
  </div>
</div>
{% endblock %}
{% block jsfooter %}

async function update() {

  // disable the notification tab until we know for certain
  // a notification is possible
  document.querySelector('.config-overview li a[href="#notify"]')
      .parentNode.classList.add('disabled');

  // Disable any has-config entries
  document.querySelector('.has-config')
      .style.display = 'none';

  // Ensure we show our progress loader and reset our url list
  document.querySelector('#url-list').textContent = ''
  document.querySelector('#url-list-progress').style.display = null;

  // Ensure no-config sections are visible
  document.querySelector('.no-config')
      .style.display = null;

  // perform our status check
  let response = await fetch('{% url "get" key %}', {
    method: 'POST',
  });

  let result = await response;
  if(response.status == 204)
  {
    // no problem; we simply have no content to retrieve
    return '';
  }
  else if(response.status == 200)
  {
    // configuration found

    // Remove our restrictions on sending notifications
    document.querySelector('.config-overview li a[href="#notify"]')
      .parentNode.classList.remove('disabled');

    // Set our configuration so it's visible
    response.text().then(function (text) {
      document.querySelector('#id_config').value = text;
    });

    // Ensure has-config sections are visible
    document.querySelector('.has-config')
        .style.display = null;

    // Disable any no-config entries
    document.querySelector('.no-config')
        .style.display = 'none';

    // perform a tag retrieval; start with 'all'
    let tags = ['all'];

    let jsonResponse = fetch('{% url "json_urls" key %}?privacy=1', {
      method: 'GET',
    }).then(function(jsonResponse) {
      return jsonResponse.json();

    }).then(function (data) {
      // Initialize our tags making it easy for an end user to
      // choose from. Tags are based off ones found in the saved
      // configuration.
      let external_data = tags.concat(data.tags).reduce(function(result, item) {
        result[item] = null;
        return result;
      }, {})

      M.Chips.init(document.querySelectorAll('.chips'), {
        placeholder: 'Optional Tag',
        secondaryPlaceholder: 'Another Tag',
        autocompleteOptions: {
          data: external_data,
          minLength: 0
        },
        onChipAdd: function(e, chip) {
          var $this = this;
          $this.chipsData.forEach(function(e, index) {
            if(!(e.tag in external_data))
              $this.deleteChip(index);
          })
        }
      });

      // Now build our our loaded list of configuration for our welcome page
      let urlList = document.createElement('ul');

      // Create a list item for each url retrieved
      data.urls.forEach(function (entry) {
        let code = document.createElement('code');
        let li = document.createElement('li');
        code.textContent = entry.url;
        li.setAttribute('class', 'card-panel');
        li.appendChild(code);

        // Get our tags associate with the URL
        entry.tags.forEach(function (tag) {
          let chip = document.createElement('div');
          chip.setAttribute('class', 'chip');
          chip.textContent = `🏷️ ${tag}`;
          li.appendChild(chip);
        });

        urlList.appendChild(li);
      });

      // Store our new list
      document.querySelector('#url-list-progress').style.display = 'none';
      document.querySelector('#url-list').textContent = ''
      if(urlList.childNodes.length > 0) {
          document.querySelector('#url-list').appendChild(urlList);
      } else {
        document.querySelector('#url-list').textContent = '{% trans "There are no Apprise URL(s) loaded." %}'
      }

    }).catch(function (err) {
      // There was an error
      document.querySelector('#url-list-progress').style.display = 'none';
      document.querySelector('#url-list').textContent = '{% trans "An error occurred retrieving the list of loaded Apprise URL(s)" %}'
    });

    return response;
  }
  // if we reach here, we failed
  return null;
}

update();

// over-ride manual submit for a nicer user experience
document.querySelector('#addconfig').onsubmit = function(event) {
  event.preventDefault();
  const form = this;
  const body = new URLSearchParams(new FormData(form));

  // perform our status check
  let response = fetch('{% url "add" key %}', {
    method: 'POST',
    body: body,
  }).then(function(response) {
     if(response.status == 200)
     {
        // update our settings
        update();

        // user notification
        Swal.fire(
          '{% trans "Save" %}',
          '{% trans "Successfully saved the specified URL(s)." %}',
          'success'
        );
     } else {
        // user notification
        Swal.fire(
          '{% trans "Save" %}',
          '{% trans "Failed to save the specified URL(s)." %}',
          'error'
        );
     }
  });
  return false;
}

// over-ride manual submit for a nicer user experience
document.querySelector('#donotify').onsubmit = function(event) {
  event.preventDefault();

  const chipElement = document.querySelector('.chips');

  chipElement.querySelector('.chips');
  const chipInput = document.querySelector('.chips > input');
  if(chipInput.value) {
    // This code just handles text typed in the tag section that was
    // not submitted. This forces any lingering un-committed text
    // into a tag just prior to it's submission
    const ev = new KeyboardEvent('keydown', {
      altKey:false,
      bubbles: true,
      cancelBubble: false,
      cancelable: true,
      charCode: 0,
      code: "Enter",
      composed: true,
      ctrlKey: false,
      currentTarget: null,
      defaultPrevented: true,
      detail: 0,
      eventPhase: 0,
      isComposing: false,
      isTrusted: true,
      key: "Enter",
      keyCode: 13,
      location: 0,
      metaKey: false,
      repeat: false,
      returnValue: false,
      shiftKey: false,
      type: "keydown",
      which: 13
    });
    chipInput.dispatchEvent(ev);
  }

  // store tags (as comma separated string) from materialize chip type into form
  document.querySelector('#id_tag').value = M.Chips.getInstance(chipElement).chipsData.reduce(
    function(s, a){
      s.push(a.tag)
      return s;
    }, []).join(",")

  const form = this;
  const body = new URLSearchParams(new FormData(form));

  // perform our notification
  Swal.fire(
    '{% trans "Notification" %}',
    '{% trans "Sending notification(s)..." %}',
  );
  Swal.showLoading()
  let response = fetch('{% url "notify" key %}', {
    method: 'POST',
    body: body,
  }).then(function(response) {
     if(response.status == 200)
     {
        // user notification
        Swal.fire(
          '{% trans "Notification" %}',
          '{% trans "Successfully sent the notification(s)." %}',
          'success'
        );
     } else {
        // user notification
        Swal.fire(
          '{% trans "Notification" %}',
          '{% trans "Failed to send the notification(s)." %}',
          'error'
        );
     }
  });
  return false;
}
{% endblock %}

{% block onload %}
{{ block.super }}
document.querySelector('label [for="id_tag"]')

{
  // create a new div with the class 'chips' assigned to it
  const element = document.createElement('div')
  let refNode = document.querySelector('label[for="id_tag"]')
  element.classList.add("chips")
  element.style.margin = '0'
  refNode.parentNode.insertBefore(element, refNode.nextSibling)
}

// Hide tag field since we use the pretty Materialize Chip setup instead
document.querySelector('#id_tag').style.display = 'none';
{% endblock %}