(function() {
  'use strict';

  /**
   *
   * Mass Input Utility
   *  allows form shapes to be manipulated asynchronously:
   *  will asynchronously submit the form and replace the contents of the
   *  mass input with the one from the BE response
   *
   * Attribute:   uw-mass-input
   *   (will be set up automatically on tables)
   *
   * Example usage:
   *  (table with one column thats only checkboxes)
   */

  var MASS_INPUT_UTIL_NAME = 'massInput';
  var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';

  var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';

  var massInputUtil = function(element) {
    var massInputId;
    var massInputFormSubmitHandler;
    var massInputForm;

    function init() {
      if (!element) {
        throw new Error('Mass Input utility cannot be setup without an element!');
      }

      massInputId = element.id;
      massInputForm = element.closest('form');

      if (!massInputForm) {
        throw new Error('Mass Input utility cannot be setup without being wrapped in a <form>!');
      }

      massInputFormSubmitHandler = makeSubmitHandler(massInputForm);
      massInputForm.addEventListener('submit', massInputFormSubmitHandler);

      // mark initialized
      element.classList.add(MASS_INPUT_INITIALIZED_CLASS);

      return {
        name: MASS_INPUT_UTIL_NAME,
        element: element,
        destroy: function() {},
      };
    }

    function makeSubmitHandler(massInputForm) {
      if (!HttpClient) {
        throw new Error('HttpClient not found!');
      }

      var method = massInputForm.getAttribute('method') || 'POST';
      var url = massInputForm.getAttribute('action') || window.location.href;
      var enctype = massInputForm.getAttribute('enctype') || 'application/json';

      var requestFn;
      if (HttpClient[method.toLowerCase()]) {
        requestFn = HttpClient[method.toLowerCase()];
      }

      return function(event) {
        // check if event occured from either a mass input add/delete button or
        // from inside one of massinput's inputs (i.e. they are focused/active)
        var activeElement = element.querySelector(':focus, :active');
        if (!activeElement) {
          return false;
        }

        event.preventDefault();
        var formData = new FormData(massInputForm);

        var formBody = [];

        for(var formField of formData) {
          var encodedKey = encodeURIComponent(formField[0]);
          var encodedValue = encodeURIComponent(formField[1]);
          formBody.push(encodedKey + "=" + encodedValue);
        }
        var requestBody = formBody.join("&");

        if (requestFn) {
          requestFn(
            url,
            {
              'Content-Type': enctype,
              'Mass-Input-Shortcircuit': massInputId,
            },
            requestBody,
          ).then(function(response) {
            return response.text()
          }).then(function(response) {
            processResponse(response);
          });
        }
      };
    }

    function processResponse(response) {
      var responseElement = document.createElement('div');
      responseElement.innerHTML = response;
      var newWrapperContents = responseElement.querySelector('#' + massInputId);
      element.innerHTML = newWrapperContents.innerHTML;

      reset()

      if (UtilRegistry) {
        UtilRegistry.setupAll(element);
      }
    }

    function reset() {
      element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
      massInputForm.removeEventListener('submit', massInputFormSubmitHandler)
    }

    return init();
  };

  // register mass input util
  if (UtilRegistry) {
    UtilRegistry.register({
      name: MASS_INPUT_UTIL_NAME,
      selector: MASS_INPUT_UTIL_SELECTOR,
      setup: massInputUtil
    });
  }
})();