(function() {
  'use strict';

  window.utils = window.utils || {};

  var JS_INITIALIZED_CLASS = 'js-modal-initialized';
  var MODAL_OPEN_CLASS = 'modal--open';
  var MODAL_TRIGGER_CLASS = 'modal__trigger';
  var MODAL_CONTENT_CLASS = 'modal__content';
  var MAIN_CONTENT_CLASS = 'main__content-body'
  var MODAL_CLOSABLE_FLAG = 'closeable';
  var MODAL_DYNAMIC_FLAG = 'dynamic';
  var OVERLAY_CLASS = 'modal__overlay';
  var OVERLAY_OPEN_CLASS = 'modal__overlay--open';
  var CLOSER_CLASS = 'modal__closer';
  var AJAX_SUBMIT_FLAG = 'ajaxSubmit';

  // helper function for convenient http requests with appropriate headers
  function httpRequest(url, method, body) {
    var requestOptions = {
      method: method,
      credentials: 'same-origin',
      headers: {
        'Is-Modal': 'True',
      },
      body: body,
    };

    return fetch(url, requestOptions);
  }

  window.utils.modal = function(modalElement, options) {

    if (!modalElement || modalElement.classList.contains(JS_INITIALIZED_CLASS)) {
      return;
    }

    var overlayElement = document.createElement('div');
    var closerElement = document.createElement('div');
    var triggerElement = document.querySelector('#' + modalElement.dataset.trigger);

    function setup() {
      document.body.insertBefore(modalElement, null);

      setupForm();
      setupCloser();

      triggerElement.classList.add(MODAL_TRIGGER_CLASS);
      triggerElement.addEventListener('click', open, false);

      modalElement.classList.add(JS_INITIALIZED_CLASS);
    }

    function open(event) {
      event.preventDefault();

      modalElement.classList.add(MODAL_OPEN_CLASS);
      overlayElement.classList.add(OVERLAY_CLASS);
      document.body.insertBefore(overlayElement, modalElement);
      overlayElement.classList.add(OVERLAY_OPEN_CLASS);

      var modalUrl = triggerElement.getAttribute('href');
      if (modalUrl && MODAL_DYNAMIC_FLAG in modalElement.dataset) {
        fillModal(modalUrl);
      }
    }

    function close(event) {
      event.preventDefault();
      overlayElement.classList.remove(OVERLAY_OPEN_CLASS);
      modalElement.classList.remove(MODAL_OPEN_CLASS);
    };

    function setupForm() {
      var form = modalElement.querySelector('form');
      if (form && AJAX_SUBMIT_FLAG in form.dataset) {
        form.addEventListener('submit', function(event) {
          event.preventDefault();

          var url = form.getAttribute('action');
          var body = new FormData(form);

          return httpRequest(url, form.method, body).then(function(response) {
            return response.json();
          }).then(function(response) {
            // TODO: process json response once backend returns json
          }).catch(function(error) {
            console.error('could not fetch or process response from ' + url, { error });
          });
        });
      }
    }

    function setupCloser() {
      if (MODAL_CLOSABLE_FLAG in modalElement.dataset) {
        modalElement.insertBefore(closerElement, null);
        closerElement.classList.add(CLOSER_CLASS);
        closerElement.addEventListener('click', close, false);
        overlayElement.addEventListener('click', close, false);
      }
    }

    function fillModal(url) {
      httpRequest(url, 'GET').then(function(response) {
        response.text().then(processResponse);
      });
    }

    function processResponse(reponseBody) {
      var modalContent = document.createElement('div');
      modalContent.classList.add(MODAL_CONTENT_CLASS);
      modalContent.innerHTML = reponseBody;

      var contentBody = modalContent.querySelector('.' + MAIN_CONTENT_CLASS);

      if (contentBody) {
        modalContent.innerHTML = contentBody.innerHTML;
      }

      var previousModalContent = modalElement.querySelector('.' + MODAL_CONTENT_CLASS);
      if (previousModalContent) {
        previousModalContent.remove();
      }
      modalElement.insertBefore(modalContent, null);
      setupForm();
    }

    setup();
  };
})();