{% load combo %}
<h2 class="cell--title">{% block title %}Appels{% if callee %} ({{ligne|default:"ligne"}} {{callee}}){% endif %}{% endblock %}</h2>

<script>
  function set_caller(caller) {
    $('.combo-search-input').val(caller).trigger('change');

    window.sessionStorage.wcs_submission_context_channel = "phone";
    window.sessionStorage.wcs_submission_context_caller = caller;
    $('.backoffice-submission-cell').trigger('combo:submission-context-update');
  }
</script>


{% if 'calls' in json.data %}
  {% with callee=callee|default:"" %}
    {% with calls=json.data.calls|get:callee %}
      <div id="calls" data-calls="{{ calls|as_json }}">
        {% if json %}  {# callee has been set #}
          <h3>Appel en cours</h3>
          {% for call in calls.current %}
            {% if forloop.first %}
              <script>
                $(function() {
                  setTimeout(function() { set_caller('{{ call.caller }}') }, 0);
                });
              </script>
            {% endif %}
            <ul><li><span class="caller" title="Chercher ce numéro" data-caller="{{ call.caller }}">
              {{call.start|parse_datetime|date:"H\hi"}} : {{ call.caller }}
            </span></li></ul>
          {% empty %}
            <div>Pas d’appel en cours</div>
          {% endfor %}

          {% for call in calls.past|slice:":10" %}
            {% if forloop.first %}<h3>Appels précédents</h3><ul>{% endif %}
            <li><span class="caller" title="Chercher ce numéro" data-caller="{{ call.caller }}">
              {{call.start|parse_datetime|date:"H\hi"}} : {{ call.caller }}
            </span></li>
            {% if forloop.last %}</ul>{% endif %}
          {% endfor %}
        {% endif %}
      </div>
    {% endwith %}
  {% endwith %}
{% else %}
  {% comment %}Ancien modèle de template utilisant le endpoint /calls moins performant {% endcomment %}
  <div id="calls" data-calls="{{ json|as_json }}">
    {% if json %}  {# callee has been set #}
      <h3>Appel en cours</h3>
      {% for call in json.data.current %}
        {% if forloop.first %}
          <script>
            $(function() {
              setTimeout(function() { set_caller('{{ call.caller }}') }, 0);
            });
          </script>
        {% endif %}
        <ul><li><span class="caller" title="Chercher ce numéro" data-caller="{{ call.caller }}">
          {{call.start|parse_datetime|date:"H\hi"}} : {{ call.caller }}
        </span></li></ul>
      {% empty %}
        <div>Pas d’appel en cours</div>
      {% endfor %}

      {% for call in json.data.past|slice:":10" %}
        {% if forloop.first %}<h3>Appels précédents</h3><ul>{% endif %}
        <li><span class="caller" title="Chercher ce numéro" data-caller="{{ call.caller }}">
          {{call.start|parse_datetime|date:"H\hi"}} : {{ call.caller }}
        </span></li>
        {% if forloop.last %}</ul>{% endif %}
      {% endfor %}
    {% endif %}
  </div>
{% endif %}

<div>
  <form>
    {% if not callee %}
      <div class="infonotice">
        <p class="pk-notice--title">Information</p>
        <p>{% block info-notice %}Indiquer {{la_ligne|default:"la ligne"}} à suivre.{% endblock %}</p>
      </div>
    {% endif %}
    <input {% if callee %}type="hidden"{% else %}type="text"{% endif %} name="callee" value="{{ callee }}" placeholder="{{ligne|default:"ligne"}}">
    {% if not callee %}<button>✓</button>{% endif %}
  </form>
  {% if callee %}<button class="release-line">{% block release-line-button-text %}Ne plus suivre {{la_ligne|default:"la ligne"}} {{callee}}{% endblock %}</button>{% endif %}
</div>

<script>

  $(function() {
    $('.caller').on('click', function(event) {
      set_caller($(event.target).data('caller'));
    });
    var $cell = $('.configjsoncell.phone-calls-all-calls, .configjsoncell.phone-calls');
    {% if not callee %}
      var callee = window.localStorage.publik_phone_callee;
      if (callee) {
        window.history.replaceState({}, "", "?callee=" + callee);
        combo_cell_loader({"element": $cell});
      }
    {% else %}
      window.localStorage.publik_phone_callee = "{{ callee }}";
      if (window.location.search != "?callee={{ callee }}") {
        window.history.replaceState({}, "", "?callee={{ callee }}");
      }
      var current_calls = $cell.find('#calls').data('calls');
      function get_caller(calls) {
        if (calls && calls && calls.current && calls.current.length) return calls.current[0].caller;
        return null;
      }

      function ajax_refresh() {
        return $.ajax({url: $cell[0].dataset.ajaxCellUrl + '?callee={{ callee }}',
          type: 'POST',
          data: {'action': 'refresh'},
          success: function(data) {
            new_content = $('<div>' + data + '</div>');
            var new_calls = $(new_content).find('#calls').data('calls');
            var new_caller = get_caller(new_calls);
            if (get_caller(current_calls) != new_caller) {
              current_calls = new_calls;
              $('#calls').replaceWith($(new_content).find('#calls'));
              if (new_caller) {
                set_caller(new_caller);
              }
            }
          }
        });
      }

      let ajax_call = null;
      let refresh_timeout_id = null;
      let last_user_activity = null;
      /* Poll ajax cell every 2,5 seconds. It is the fast polling mode. */
      const fast_polling_duration = 2500;
      /* After 5 minutes without any activity (mouse, keyboard, scrolling)
         reduce polling to every 30 seconds. It is the slow polling
	 mode.
      */
      const slow_period = 300000;
      const slow_polling_duration = 30000;
      function refresh_calls() {
        clearTimeout(refresh_timeout_id);
        /* Do not poll if tab is hidden. */
        if (document.hidden) {
          // Tab is not visible do not refresh
          return;
        }
        if (ajax_call) { // If refresh was too long, abort and try a new one
          ajax_call.abort();
          ajax_call = null;
        }
        ajax_call = ajax_refresh();
        const duration_since_last_user_activity = Date.now() - last_user_activity;
        /* Choose slow or fast polling */
        if (duration_since_last_user_activity > slow_period) {
          refresh_timeout_id = setTimeout(refresh_calls, slow_polling_duration);
        } else {
          refresh_timeout_id = setTimeout(refresh_calls, fast_polling_duration);
        }
      }
      /* Start polling fast */
      function start_refresh_calls() {
        last_user_activity = Date.now();
        refresh_calls();
      }
      start_refresh_calls();
      function user_activity() {
        const duration_since_last_user_activity = Date.now() - last_user_activity;
        /* If we were in a slow polling period, restart with fast polling immediately */
        last_user_activity = Date.now();
        if (duration_since_last_user_activity > slow_period) {
          start_refresh_calls();
        }
      }
      $(document).on('mousemove mousedown keyup touchstart', user_activity);
      $(document.root).on('scroll', user_activity);
      $(document).on('visibilitychange', function () {
        if (document.hidden) {
          return;
        }
        /* If tab become visible again, restart with fast polling */
        start_refresh_calls();
      });

      $('button.release-line').on('click', function() {
        clearTimeout(refresh_timeout_id);
        window.localStorage.publik_phone_callee = "";
        window.sessionStorage.wcs_submission_context_channel = "";
        window.sessionStorage.wcs_submission_context_caller = "";
        window.history.replaceState({}, "", "?callee=");
        combo_cell_loader({"element": $cell});
        return false;
      });
    {% endif %}
  });
</script>