window.tinyforms = {
  init: function() {
    if (tinyforms.loaded) {
      return;
    }
    var forms = document.querySelectorAll('form[data-tinyforms]');
    forms.forEach(function(form) {
      form.addEventListener('submit', tinyforms.onSubmit);
    });
    tinyforms.loaded = true;
  },

  submitForm: function(form) {
    return new Promise(function(resolve, reject) {
      var action = form.getAttribute('action');
      var formData = new FormData(form);

      var xhr = new XMLHttpRequest();
      xhr.open('POST', action, true);
      xhr.setRequestHeader("Accept", "application/json");
      xhr.onload = function () {
        var response;
        try {
          response = JSON.parse(xhr.responseText);
        } catch (e) {
          response = xhr.responseText;
        }
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(response);
        } else {
          reject(response);
        }
      };
      xhr.onerror = function() {
        reject(xhr.responseText)
      };
      xhr.send(formData);
    });
  },

  onSubmit: function(e) {
    e.preventDefault();
    return tinyforms.submitForm(this)
      .then((response) => {
        this.dispatchEvent(new CustomEvent('tinyforms:submitted', {detail: { submission: response.submission, response: response }}));
      })
      .catch((response) => {
        this.dispatchEvent(new CustomEvent('tinyforms:error', {detail: { submission: response.submission, response: response }}));
      });
  }
};

document.addEventListener('DOMContentLoaded', function() {
  tinyforms.init();
});