{% extends "qommon/forms/widget.html" %}

{% block widget-error %}
{{ block.super }}
<span class="franceconnect--error" id="form_{{widget.name}}_error" style="display: none">Une erreur s'est produite lors de la récupération des données.</span>
{% endblock %}

{% block widget-control %}
<input id="form_{{widget.name}}" type="hidden" name="{{widget.name}}" data-initial-display-value="{{widget.get_display_value|default_if_none:''}}" data-url="{{widget.get_select2_url}}"{% if widget.value %} value="{{ widget.value }}"{% endif %} />
<input id="form_{{widget.name}}_display" type="text" name="{{widget.name}}_display" style="display: none" readonly />
<a class="franceconnect--clear" id="form_{{widget.name}}_clear" title="Supprimer" role="button" data-field-id="form_{{widget.name}}"></a>
<button class="franceconnect--button" id="form_{{widget.name}}_fc_button" data-field-id="form_{{widget.name}}" role="button">Obtenir avec FranceConnect</button>

{% if not request.is_in_backoffice %}
<script>
$(function () {
  const fc_popup = function(url) {
       const height = 670;
       const width = 1000;
       const left = (screen.width/2)-(width/2);
       const top = (screen.height/2)-(height/2);
       const popup = window.open(url, 'FranceConnect',
         'scrollbars=true, width='+width+', height='+height+',top='+top+', left='+left+', resizable=no,copyhistory=no'
       );
       if (window.focus) popup.focus();
       return popup;
  };

  const reset_field = function() {
      const field_id = '#' + $(this).data('field-id');
      $(field_id + '_fc_button').show();
      $(field_id).val('');
      $(this).hide();
      $(field_id + '_display').val('');
      $(field_id + '_display').hide();
  };

  const fill_field = function(field_id, value, display_value) {
      const field_selector = '#' + field_id;
      $(field_selector).val(value);

      const $field_display_value = $(field_selector + '_display');
      $field_display_value.val(display_value);
      $field_display_value.show();
      $(field_selector + '_fc_button').hide();
      $(field_selector + '_clear').show();
  };

  let popup_window = null;
  let field_id = null;
  const $input = $('div.template-franceconnect-data #form_{{widget.name}}');

  if ($input.val()) {
     fill_field($input.attr('id'), $input.val(), $input.data('initial-display-value'));
  }

  $('.franceconnect--clear').on('click', reset_field);

  $.getJSON($input.data('url') + '?q=', function (response) {
      const init_request_url = response.data[0].init_request_url;
      $('.franceconnect--button').on('click', function (event) {
          if (popup_window) {
            popup_window.close();
          }
          field_id = $(this).data('field-id');
          let popup_url = init_request_url;
          const origin = 'origin=' + window.location.href;
          if (init_request_url.indexOf('?') != -1) {
              popup_url += '&' + origin;
          } else {
              popup_url += '?' + origin;
          }
          popup_window = fc_popup(popup_url);
          return false;
     });
  });

  $(window).on('message', function (event) {
      if (!event.originalEvent.data.error) {
          fill_field(field_id, event.originalEvent.data.id, event.originalEvent.data.text);
      } else {
          $('#' + field_id + '_error').show();
          console.error(event.originalEvent.data.error);
          console.error(event.originalEvent.data.data);
      }
      if (popup_window) {
          popup_window.close();
      }
      popup_window = null;
      field_id = null;
   });
});
</script>
{% endif %}

{% endblock %}
