(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_CLOSABLE_FLAG = 'closeable';
  var OVERLAY_CLASS = 'modal__overlay';
  var OVERLAY_OPEN_CLASS = 'modal__overlay--open';
  var CLOSER_CLASS = 'modal__closer';
  var AJAX_SUBMIT_FLAG = 'ajaxSubmit'

  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 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);
    }

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

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

      var form = modalElement.querySelector('form');
      if (form && AJAX_SUBMIT_FLAG in form.dataset) {
        setupForm(form);
      }

      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);
      }

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

    function setupForm(form) {
      form.addEventListener('submit', function(event) {
        event.preventDefault();

        var url = form.getAttribute('action');
        var httpRequestOptions = {
          method: form.method,
          credentials: 'same-origin',
          headers: {
            'Is-Modal': 'True'
          },
          body: new FormData(form),
        };

        return fetch(url, httpRequestOptions).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 });
        });
      });
    }

    setup();
  };
})();