var FormView = View.extend({

  method: "post",
  useMinotaur: false,

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

  initialize: function(opt){
    if (opt && opt.parent) {
      this.parent = opt.parent
    }
    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()
  }

})

*/