var CartPayment = FormView.extend({
  
  el: "#cart_payment",
  
  address_template: $("#cart_payment .address_row_template").html(),
  cc_template: $("#cart_payment .cc_template").html(),
  
  action: sdk.cart.set_credit_card,
  
  address_list_mode: false,
  cc_list_mode: false,
  data: {},
  
  events: {
    "change [name=SameAsShipping]": "toggle_shipping",
    "click .address_dropdown": "toggle_address",
    "click .cc_dropdown": "toggle_cc",
  },

  initialize: function(opt){
    this.parent = opt.parent
    this.$form = this.$("form")
    this.$msg = this.$(".msg")
    this.$same_as_shipping = this.$("[name=SameAsShipping]")
    this.$billing_address_rapper = this.$(".billing_address_rapper")
    this.$address_list = this.$(".address_list")
    this.$address_form = this.$(".address")
    this.$address_dropdown = this.$(".address_dropdown")
    this.$cc_list = this.$(".cc_list")
    this.$cc_form = this.$(".cc")
    this.$cc_dropdown = this.$(".cc_dropdown")
    this.$cc_confirm = this.$(".cc_confirm")

    this.address = new AddressView ({ parent: this, checkPhone: false })
    this.cc = new CreditCardView ({ parent: this })
    this.scroller = new IScroll('#cart_payment', app.iscroll_options)
    this.address.disabled = true
    this.cc.disabled = true
  },

  show: function(){
    document.body.className = "cart"
    app.cart.el.className = "payment"
    app.footer.show("CONFIRM >", "CANCEL")
    window.location.hash = "#/cart/payment"

    this.populate()
    this.deferScrollToTop()
  },
  
  toggle_shipping: function(){
    setTimeout(function(){
      var state = this.$same_as_shipping.prop("checked")
      this.$billing_address_rapper.toggle( ! state )
      this.address.disabled = state
    }.bind(this))
  },

  toggle_address: function(state){
    if (! app.account.ccs.length) {
      state = false
    }
    // this.$address_dropdown.toggle( !! app.account.ccs.length )

    this.address_list_mode = typeof state == "boolean" ? state : ! this.list_mode
    this.address.disabled = this.address_list_mode
    this.$address_form.toggle(! this.address_list_mode)
    this.$address_list.toggle(this.address_list_mode)
  },

  toggle_cc: function(state){
    if (! app.account.ccs.length) {
      state = false
    }
    // this.$cc_dropdown.toggle( !! app.account.ccs.length )

    this.cc_list_mode = typeof state == "boolean" ? state : ! this.cc_list_mode
    this.cc.disabled = this.cc_list_mode
    this.$cc_form.toggle(! this.cc_list_mode)
    this.$cc_list.toggle(this.cc_list_mode)
    this.$cc_confirm.toggle(this.cc_list_mode)
  },

  populate: function(){
    this.$(".save_as_default").show()
    this.$address_list.empty()
    this.$cc_list.empty()
    this.toggle_address( !! app.account.ccs.length )
    this.toggle_cc( !! app.account.ccs.length )

    app.account.ccs.forEach(function(cc){
      var address_t = this.address_template.replace(/{{id}}/g, cc.Id)
                           .replace(/{{checked}}/g, cc.IsDefault ? "checked" : "")
                           .replace(/{{name}}/g, (cc.Name + " " + cc.Surname).toUpperCase())
                           .replace(/{{address}}/g, cc.Address.replace(/\n$/,"").replace("\n", ", "))
                           .replace(/{{city}}/g, cc.City)
                           .replace(/{{state}}/g, cc.Province)
                           .replace(/{{zip}}/g, cc.ZipCode)

      var cc_t = this.cc_template.replace(/{{id}}/g, cc.Id)
                           .replace(/{{checked}}/g, cc.IsDefault ? "checked" : "")
                           .replace(/{{number}}/g, cc['Number'])
                           .replace(/{{type}}/g, cc.Type.toUpperCase())
                           .replace(/{{exp}}/g, cc.ExpirationMonth + "/" + cc.ExpirationYear)

      this.$address_list.append(address_t)
      this.$cc_list.append(cc_t)
    }.bind(this))
  },

  finalize: function(data){
    var shipping_info = {}, address_data, address_id, cc_info = {},  cc_data, cc_id
    var shipping_type = $("[name=ShippingType]").filter(function(){ return $(this).prop("checked") }).val()

    if (this.$same_as_shipping.prop("checked")) {
      address_data = app.cart.shipping.data
    }
    else if (this.address_list_mode) {
      address_id = this.$("[name=AddressId]").filter(function(){ return $(this).prop("checked") }).val()
      address_data = app.account.addressLookup[ address_id ]
    }
    else {
      address_data = data
    }
    
    if (this.cc_list_mode) {
      cc_id = this.$("[name=CCId]").filter(function(){ return $(this).prop("checked") }).val()
      cc_data = app.account.ccLookup[ cc_id ]

      var card_on_file = { 
        "guid": cc_data.Guid,
        "cvv": this.$("[name=CvvConfirm]"),
      }
      
      app.curtain.show("loading")
      promise(sdk.cart.use_stored_credit_card, { data: card_on_file }).then(function(data){
        app.curtain.hide("loading")
        this.success()
      }.bind(this)).error(function(data){
        app.curtain.hide("loading")
      }.bind(this))
      
      return
    }
    else {
      cc_data = data
    }
    
    var credit_info = {
      "HolderName": address_data.Name,
      "HolderSurname": address_data.Surname,
      "HolderAddress": address_data.Address || address_data.StreetWithNumber,
      "HolderCity": address_data.City,
      "HolderProvince": address_data.Province,
      "HolderZip": address_data.PostalCode || address_data.ZipCode,
      "HolderISOCountry": CANADIAN_LOOKUP[ address_data.Province ] ? "CA" : "US",
      "HolderEmail": auth.user.Email,
      "CardNumber": cc_data['Number'],
      "Type": cc_data.Type,
      "ExpirationMonth": cc_data.ExpirationMonth,
      "ExpirationYear": cc_data.ExpirationYear.substr(2,3),
      "Cvv": cc_data.Cvv,
    }
    
    console.log( credit_info )

    return credit_info
  },
  
  success: function(){
    app.router.go('cart/confirm')
  },
  
  error: function(data){
    console.log(data)
    app.cart.payment.show_errors(["Number","There was a problem with your credit card."])
  },
  
  cancel: function(){
    app.router.go('cart/shipping')
  },


})