var FormView = View.extend({
  method: "post",
  useMinotaur: false,

  events: {
    "submit form": "save",
  },

  initialize: function (opt) {
    if (opt && opt.parent) {
      this.parent = opt.parent;
    }
    this.opt = opt;
    this.$form = this.$("form");
    this.$errors = this.$(".errors");
  },

  reset: function () {
    this.$("input,textarea")
      .not("[type='submit']")
      .not("[type='hidden']")
      .val("");
  },

  showErrors: function (errors) {
    if (errors && errors.length) {
      this.$errors.empty();
      for (var i in errors) {
        this.$errors.append("<div>" + errors[i] + "</div>");
      }
      this.$errors.css("opacity", 1.0);
      setTimeout(
        function () {
          this.$errors.show().css("opacity", 1.0);
        }.bind(this),
        200
      );
    }
  },

  serialize: function () {
    var fd,
      fh,
      hasCSRF = false;

    var file_els = this.$("input[name][type='file']");
    if (file_els.length) {
      fd = new FormData();
    } else {
      fh = {};
    }
    this.$("input[name], select[name], textarea[name]").each(function () {
      if (this.type == "file") {
        for (var i = 0; i < this.files.length; i++) {
          fd.append(this.name, this.files[i]);
        }
      } else {
        if (fd) {
          fd.append(this.name, this.value);
        } else {
          fh[this.name] = this.value;
        }
        hasCSRF = hasCSRF || this.name == "_csrf";
      }
    });

    if (!hasCSRF) {
      if (fd) {
        fd.append("_csrf", $("[name=_csrf]").attr("value"));
      } else {
        fh["_csrf"] = $("[name=_csrf]").attr("value");
      }
    }

    return fd || JSON.stringify(fh);
  },

  save: function (e, successCallback, errorCallback) {
    e && e.preventDefault();

    this.$errors.hide().css("opacity", 0.0);

    if (this.validate) {
      var errors = this.validate();
      if (errors && errors.length) {
        if (errorCallback) {
          errorCallback(errors);
        } else {
          this.showErrors(errors);
        }
        return;
      }
    }

    var action = typeof this.action == "function" ? this.action() : this.action;
    if (!action) return;

    var data = this.serialize();
    var headers = new Headers();
    headers.append("csrf-token", $("[name=_csrf]").attr("value"));
    if (typeof data === "string") {
      headers.append("content-type", "application/json");
    }

    this.$form.addClass("sending");
    fetch(action, {
      method: this.method.toUpperCase(),
      headers: headers,
      credentials: "same-origin",
      body: data,
    })
      .then((raw) => raw.json())
      .then((response) => {
        this.$form.removeClass("sending");
        if (response.error) {
          var errors = [];
          if (response.error.errors && response.error.errors.length) {
            for (var key in response.error.errors) {
              errors.push(response.error.errors[key].message);
            }
          } else {
            errors.push(response.error);
          }
          if (errorCallback) {
            errorCallback(errors);
          } else {
            this.showErrors(errors);
          }
          return;
        }
        if (successCallback) {
          successCallback(response);
        }
        if (this.success) {
          this.success(response);
        }
      })
      .catch((response) => {
        console.log(response);
        this.$form.removeClass("sending");
        var errors = [];
        if (response.error) {
          if (response.error.errors && response.error.errors.length) {
            for (var key in response.error.errors) {
              errors.push(response.error.errors[key].message);
            }
          } else {
            errors.push(response.error);
          }
        }
        if (errorCallback) {
          errorCallback(errors);
        } else {
          this.showErrors(errors);
        }
      });
    //       complete: function(response){
    //         if (this.useMinotaur) {
    //           Minotaur.hide()
    //         }
    //       }
    //
    //     if (this.useMinotaur) {
    //       Minotaur.show()
    //     }

    this.beforeSend && this.beforeSend();
  },
});

/*

var ModalFormView = ModalView.extend(FormView.prototype).extend({

  load: function(){
    this.reset()
    this.show()
  }

})

*/