{% load combo %}
<h2>Appels{% if callee %} (ligne {{callee}}){% endif %}</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>

<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>

<div>
  <form>
    {% if not callee %}
    <div class="infonotice">
      Indiquer le numéro de ligne à suivre.
    </div>
    {% endif %}
    <input {% if callee %}type="hidden"{% else %}type="text"{% endif %} name="callee" value="{{ callee }}">
    {% if not callee %}<button>✓</button>{% endif %}
  </form>
  {% if callee %}<button class="release-line">Ne plus suivre la ligne {{callee}}</button>{% endif %}
</div>

<script>
$(function() {
  $('.caller').on('click', function(event) {
    set_caller($(event.target).data('caller'));
  });
  var $cell = $('.configjsoncell.phone-calls');
  {% if not callee %}
  var callee = window.localStorage.publik_phone_callee;
  if (callee) {
    window.history.replaceState({}, "", "?callee=" + callee);
    combo_load_cell($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.data && calls.data.current && calls.data.current.length) return calls.data.current[0].caller;
    return null;
  }
  function refresh_calls() {
    $.ajax({url: $cell.data('ajax-cell-url') + '?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);
                }
              }
            }
     });
  }
  var refresh_interval_id = setInterval(refresh_calls, 2500);
  $('button.release-line').on('click', function() {
    clearInterval(refresh_interval_id);
    window.localStorage.publik_phone_callee = "";
    window.sessionStorage.wcs_submission_context_channel = "";
    window.sessionStorage.wcs_submission_context_caller = "";
    window.history.replaceState({}, "", "?callee=");
    combo_load_cell($cell);
    return false;
  });
  {% endif %}
});
</script>
