function RestForm(element) {
    this.element = element;
    this.settings = {
        url: element.getAttribute('action'),
        method: element.getAttribute('method'),
        disableSubmit: true
    }
    var form = this;
    this.element.addEventListener("submit", function(e) {
        e.preventDefault();
        form.clear_errors();
        form.pre_save(function(r) {
            form.save_form(r);
        }, function(err) {
            form.show_errors(err);
        });
        return false;
    });
}
RestForm.prototype.pre_save = function(success, failure) {
    success();
}
RestForm.prototype.clear_errors = function() {
    var errors = this.element.querySelectorAll(".error");
    for(var i=0;i<errors.length;i++) {
        var err = errors[i];
        err.parentNode.removeChild(err);
        delete err;
    }
}
RestForm.prototype.show_errors = function(errs) {
    this.clear_errors();
    var error_fields = Object.keys(errs);
    for(var i=0;i<error_fields.length;i++) {
        var error_field = errs[error_fields[i]];
        for (var k=0;k<error_field.length;k++) {
            
            var err = error_field[k];console.debug(err);
            var error_tag = document.createElement("span");
            error_tag.classList.add("error");
            error_tag.innerText = err;
            var field = this.element.querySelector("[name=\""+error_fields[i]+"\"]");
            if(field instanceof Element) {
                field.parentElement.append(error_tag)
            }
        }
    }
}

RestForm.prototype.onsuccess = function(e) {}
RestForm.prototype.oncomplete = function(data) {
    if(data.error) {
            this.show_errors(data.error)
        } else {
            this.onsuccess(data);
        }
        if (this.settings.disableSubmit) {
        submit_button = this.element.querySelector('[type=submit]');
        if(submit_button) {
            submit_button.removeAttribute('disabled');
        }
    }    
    
}
RestForm.prototype.save_form = function save_form(e) {
    var form = this;
    // Get form data
    var data = this.getFormData()
    // Call pre-submit handler
    if (this.settings.disableSubmit) {
        submit_button = this.element.querySelector('[type=submit]');
        if(submit_button) {
            submit_button.setAttribute('disabled', 'disabled');
        }
    }

    fetch(this.settings.url, {
        credentials: "same-origin",
        method: this.settings.method,
        headers:{
            "Content-Type": "application/json", 
            "Accept": "application/json",
            "x-csrftoken": data["csrfmiddlewaretoken"]
        },
        body: JSON.stringify(data),
    }).then(function success(response) {
        response.json().then(function read(result) {
        console.debug({status:response.status, resp:result});
        if(response.status >= 200 && response.status <= 204) {
            form.oncomplete(result);
        } else if (response.status > 399 && response.status < 500) {
            form.oncomplete({error:result});
        } else if (response.status >= 500) {
            form.oncomplete({error:result});
        }
    });
    });
}
function serializeArray(form) {
    var field, l, s = [];
    if (typeof form == 'object' && form.nodeName == "FORM") {
        var len = form.elements.length;
        for (var i=0; i<len; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
                if (field.type == 'select-multiple') {
                    l = form.elements[i].options.length; 
                    for (j=0; j<l; j++) {
                        if(field.options[j].selected)
                            s[s.length] = { name: field.name, value: field.options[j].value };
                    }
                } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
                    s[s.length] = { name: field.name, value: field.value };
                }
            }
        }
    }
    return s;
}


RestForm.prototype.getFormData = function getFormData() {
      /*
       * Prepares form data object prior to serialization
       *
       * return @dataObj
       */

      // Load array of form fields
      
      var formData = serializeArray(this.element);
      var dataObj = {};
      // Loop through each form element
      for (var i = 0; i < formData.length; i++) {
        // Check to make sure this field isn't excluded
          dataObj[formData[i].name] = formData[i].value;
        
      }

      return dataObj;
    };

        function StripeCardEntry(api_key) {
            this.element = document.createElement("div");
            this.element.setAttribute("class", "stripe-form")
            this.stripeElement = document.createElement("div");
            this.tokenInput = document.createElement("input");
            this.tokenInput.setAttribute("type", "hidden");
            this.tokenInput.setAttribute("name", "token");
            this.summary = document.createElement("div")
            this.summary.classList.add("summary")
        
            // this.saveButton = document.createElement("button");
            // this.saveButton.innerText = "Save";
    
            this.element.appendChild(this.stripeElement);
            this.element.appendChild(this.tokenInput);
            // this.element.appendChild(this.saveButton);
            this.stripe = Stripe(api_key);

            var form = this;
    /*      this.saveButton.addEventListener('click', function(event) {
                event.preventDefault();
    
            });
            */
        }
        StripeCardEntry.prototype.create = function create() {
            var elements = this.stripe.elements();
            this.card = elements.create('card', {'style': this.style});
            this.card.mount(this.stripeElement);
            return this.element;
        }
        StripeCardEntry.prototype.update = function update(callback) {
            var form = this;
            form.stripe.createToken(form.card).then(function(result) {
                if (result.error) {
                    form.error = result.error.message;
                    callback.call(form, null, result.error)
                } else {
                    form.tokenInput.value = result.token.id;
                    callback.call(form, result);
                }
            });
        }
        StripeCardEntry.prototype.onsubmit = function() {}

        StripeCardEntry.prototype.style = {    
            'base': {
                'fontFamily':'proxima-nova,Helvetica,Arial,sans-serif',
                'fontSize':'13px',
                'lineHeight':'18px',
               // 'padding':'4px',
                'color':'#555',
    
            }, 
            'complete': {
                'color':'#6ea',
            },
            'invalid': {
                'color':'#b00',
                'fontWeight':'bold'
            },
        }