var SerializableView = View.extend({

  events: {
    "change select": "update_select",
    "focus input": "focus_input",
    "submit form": "save",
  },
  
  preload: function(data){
    if (! data && sdk.env == "production") { return }
    data = data || this.test_data
    if (! data) { return }
    this.load_data(data)
  },

  load_data: function(data){
    Object.keys(data).forEach(function(key){
      var value = data[key]
      var $el = this.$("[name=" + key + "]")

      if ($el.attr("type") == "checkbox") {
        $el.prop("checked", value)
      }
      else if ($el.prop("tagName") == "SELECT") {
        $el.val( value )
        this.update_select({ currentTarget: $el })
      }
      else {
        $el.val( value )
      }
    }.bind(this))
  },

  serialize: function(){
    var fields = {}
    this.$("input[name], select[name], textarea[name]").each( function(){
      if (this.type == "checkbox") {
        if ($(this).prop("checked")) {
          fields[this.name] = this.value 
        }
      }
      else {
        fields[this.name] = this.value
      }
    })
    return fields
  },
  
  deserialize: function(data){
    this.$("input[name], textarea[name]").val("")
    Object.keys(data).forEach(function(k){
      this.$("[" + k + "]").val(data[k])
    })
  },
  
  focus_input: function(e){
    $(e.currentTarget).removeClass("error_hilite")
  },
  
  update_select: function(e){
    var $target = $(e.currentTarget), value = $target.val()
    var label = $target.find("option").filter(function(){ return this.value === value }).html()
    $target.parent().addClass("picked")
    $target.parent().find("span").html(label)
  },
  
  validate: function(data, errors){
    var data = data || this.serialize()
    var errors = errors || []
    var presence_msgs = this.validate_presence || {}
    if (! this.disabled) {
      Object.keys(presence_msgs).forEach(function(k){
        if (! data[k]) errors.push( [ k, presence_msgs[k] ] )
      })
    }
    this.validate_fields && this.validate_fields(data, errors)
    this.cc && this.cc.validate(data, errors)
    this.address && this.address.validate(data, errors)
    return { errors: errors, data: data }
  },
  
  show_errors: function(errors){
    var msgs = []
    errors.forEach(function(e, i){
      if (i > 0) { return }
      this.$("[name=" + e[0] + "]").addClass('error_hilite')
      msgs.push(e[1])
    }.bind(this))
    this.$msg.html(msgs.join("<br>"))
    this.$msg.addClass('alert-notice')
  },
  
  hide_errors: function(){
    this.$msg.removeClass('alert-notice')
    this.$msg.html("")
  },
  
  finalize: function(data){
    return data
  },

  save: function(e){
    e && e.preventDefault()

    var valid = this.validate()
    if (valid.errors.length) {
      this.show_errors(valid.errors)
      return
    }
    else {
      this.hide_errors()
    }
    
    var finalized_data = this.finalize(valid.data)
    this.submit( finalized_data )
  },
  
  submit: function(data){
    if (! data) {
      return
    }
    app.curtain.show("loading")
    this.action({
      data: data,
      success: function(data){
        app.curtain.hide("loading")
        this.success(data)
      }.bind(this),
      error: function(data){
        app.curtain.hide("loading")
        this.error(data)
      }.bind(this),
    })
  },
  
  success: function(data){
    console.log("SUCCESS", data)
  },
  
  error: function(data){
    console.log("FAIL", data)
  },

})

var FormView = View.extend(SerializableView.prototype).extend(ScrollableView.prototype)