Modal

/**
 * Component
 *
 * @param {Element} element
 */

export default function Modal(id, event) {
  /* eslint-disable */
  var modal = document.getElementById(id);

  //button for testing purposes design system
  var btn = document.getElementsByClassName("modalBtn")[0];
  var modalElement = document.getElementById(id);
  if(modalElement) {
    var closeArrow = modalElement.getElementsByClassName("modal__content_header_close")[0];
    var buttonClose = modalElement.getElementsByClassName("modal_close")[0];
    var modalButtonDone = modalElement.getElementsByClassName("button--primary")[0];
    var modalButtonExpired = modalElement.getElementsByClassName("modal_session_expired")[0];
  }


  if (typeof btn !== "undefined") {
    if (id === 'modal-design-system') {
      btn.addEventListener("click", function () {
        showModal();
      });
    }
  }

  window.addEventListener(event, function () {
    var handle;
    showModal();
    if (event === 'session_timeout') {
      var suffix = document.getElementById("modal-suffix");
      if (suffix) {
        handle = startCountDown(300, document.querySelector('#countdown'));
      }
      if (modalButtonDone) {
        modalButtonDone.addEventListener("click", function () {
          hideModal();
          clearInterval(handle);
          //Send request to extend session
          var xhttp = new XMLHttpRequest();
          xhttp.open("GET", document.location.href);
          xhttp.send();
          window.setTimeout(function () {
            //A lot of code for just IE
            var event;
            if(typeof(Event) === 'function') {
              event = new CustomEvent('session_timeout');
            }else{
              event = document.createEvent('Event');
              event.initEvent('session_timeout', true, true);
            }
            window.dispatchEvent(new CustomEvent('session_timeout'));
          }, 600000)
        });
      }
      if (event === 'session_expired') {
        clearInterval(handle);
      }
    }
  });

  function showModal() {
    if (modal) {
      modal.style.display = "block";
      focusTrap(modal);
      if (modalButtonDone) {
        modalButtonDone.focus();
      }
    }
  };

  function hideModal() {
    if (modal) {
      modal.style.display = "none";
    }
  }

  if (closeArrow) {
    closeArrow.addEventListener("click", function() {
      hideModal();
    });
    closeArrow.addEventListener("keyup", function (i) {
      if (i.keyCode == 13 || i.keyCode == 32) {
        hideModal();
      }
    });
    var placeholder = document.getElementById("placeholder");
    closeArrow.addEventListener("keydown", function (e) {
      if (e.keyCode == 9 && e.shiftKey) {
        placeholder.focus();
      }
    });
  }

  if (buttonClose) {
    buttonClose.addEventListener("click", function() {
      hideModal();
    })
  }

  if (modalButtonExpired) {
    modalButtonExpired.addEventListener("click", function () {
      window.location.href=window.location.href;
    });
  }

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };

  // Handle ESC key (key code 27)
  document.addEventListener("keyup", function (e) {
    if (e.keyCode == 27) {
      hideModal();
    }
  });

  //Stay focus in modal with tab (key code 9)
  if (modalButtonDone) {
    var modalHeader = document.getElementById("focusId");
    modalButtonDone.addEventListener("keydown", function (e) {
      if (e.keyCode == 9 && !e.shiftKey) {
        modalHeader.focus();
      }
    });
  }

  function startCountDown(duration, display) {
    var timer = duration, minutes, seconds;
    return setInterval(function () {
      minutes = parseInt(timer / 60, 10)
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.textContent = minutes + ":" + seconds;

      if (--timer < 0) {
        hideModal();
        //A lot of code to make it compatible with IE
        var event;
        if(typeof(Event) === 'function') {
          event = new CustomEvent('session_expired');
        }else{
          event = document.createEvent('Event');
          event.initEvent('session_expired', true, true);
        }
        window.dispatchEvent(event);
      }
    }, 1000);
  }

  function focusTrap(element) {
    var focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
    var firstFocusableEl = focusableEls[0];
    var lastFocusableEl = focusableEls[focusableEls.length - 1];
    var KEYCODE_TAB = 9;

    element.addEventListener('keydown', function(e) {
      var isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);

      if (!isTabPressed) {
        return;
      }

      if ( e.shiftKey ) /* shift + tab */ {
        if (document.activeElement === firstFocusableEl) {
          lastFocusableEl.focus();
          e.preventDefault();
        }
      } else /* tab */ {
        if (document.activeElement === lastFocusableEl) {
          firstFocusableEl.focus();
          e.preventDefault();
        }
      }

    });
  }
}