(function() {
  'use strict';

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

  window.utils.modal = function(modal) {
    var overlay = document.createElement('div');
    var closer = document.createElement('div');
    var trigger = document.querySelector('#' + modal.dataset.trigger);
    // var origParent = modal.parentNode;

    function open(event) {
      // disable modals for narrow screens
      if (event) {
        event.preventDefault();
      }
      modal.classList.add('modal--open');
      overlay.classList.add('modal__overlay');
      // document.body.insertBefore(modal, null);
       document.body.insertBefore(overlay, modal);
      overlay.classList.add('modal__overlay--open');

      if (modal.dataset.closeable === 'true') {
        closer.classList.add('modal__closer');
        modal.insertBefore(closer, null);
        closer.addEventListener('click', close, false);
        overlay.addEventListener('click', close, false);
      }
    }

    // you can open this modal via event
    // example: document.dispatchEvent(new CustomEvent('modal-open', { details: { for: 'modal-[id]' }}))
    function openOnEvent(event) {
      if (event.detail.for === modal.getAttribute('id')) {
        open();
      }
    }

    function close(event) {
      if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
        overlay.remove();
        // origParent.insertBefore(modal, null);
        modal.classList.remove('modal--open');
        closer.removeEventListener('click', close, false);
      }
    };

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

      // every modal can be openend via document-wide event, see openOnEvent
      document.addEventListener('modal-open', openOnEvent, false);
      // if modal has trigger assigned to it open modal on click
      if (trigger) {
        trigger.classList.add('modal__trigger');
        trigger.addEventListener('click', open, false);
      }

      if (modal.dataset.dynamic === 'True') {
        // var dynamicContentURL = trigger.getAttribute('href');
        // console.log(dynamicContentURL);
        // if (dynamicContentURL.length > 0) {
        //   fetch(dynamicContentURL, {
        //     credentials: 'same-origin',
        //   }).then(function(response) {
        //     return response.text();
        //   }).then(function(body) {
        //     var modalContent = document.createElement('div');
        //     modalContent.innerHTML = body;
        //     var main = modalContent.querySelector('.main__content-body');
        //     if (main) {
        //       modal.appendChild(main);
        //     } else {
        //       replaceMe.innerHTML = body;
        //     }
        //   });
        // }

        var dynamicContentURL = trigger.getAttribute('href');
        console.log(dynamicContentURL);
        var frame = document.createElement('iframe');
        frame.setAttribute('id', "frame-" + modal.getAttribute('id'));
        modal.insertBefore(frame, null);

        frame.onload = function() {
            frame.style.visibility = 'hidden';
            frame.style.height = '0';

            var doc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document;
            var body = doc.body, html = doc.documentElement;
            var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );

            frame.style.height = "calc(" + (height + "px") + " + 1em)";
            frame.style.visibility = 'visible';

            doc.querySelectorAll("form").forEach(function(form) {
                form.setAttribute("target", "_top");
            });
        }

        var url = "";
        var i = dynamicContentURL.indexOf('?');
        if (i === -1) {
          url = dynamicContentURL + "?" + #{String modalParameter};
        } else {
          url = dynamicContentURL.slice(0,i) + "?" + #{String modalParameter} + "&" + dynamicContentURL.slice(i + 1);
        }

        frame.setAttribute('src', url);
      }
      // tell further modals, that this one already got initialized
      modal.classList.add('js-modal-initialized');
    }
    setup();
  };
})();

document.addEventListener('DOMContentLoaded', function() {

  Array.from(document.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
    new utils.modal(modal);
  });

}, false);