var CartPayment = FormView.extend({
  
  el: "#cart_payment",
  
  address_template: $("#cart_payment .address_template").html(),
  cc_template: $("#cart_payment .cc_template").html(),
  
  action: sdk.cart.set_credit_card,
  
  address_list_mode: false,
  cc_list_mode: false,
  
  events: {
    "change [name=same_as_shipping]": "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.$address_list = this.$(".address_list")
    this.$address_form = this.$(".address")
    this.$cc_list = this.$(".cc_list")
    this.$cc_form = this.$(".cc")

    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
  },

  // sdk.cart.set_credit_card
  // sdk.payment.list_credit_cards
  // sdk.payment.add_credit_card
  // sdk.payment.delete_credit_card
  // sdk.payment.get_payment_types
  // sdk.cart.use_stored_credit_card

  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_address: function(state){
    if (! app.account.ccs.length) {
      state = false
    }
    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_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)
  },

  populate: function(){
    app.account.ccs.forEach(function(cc){
      console.log(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)
                           .replace(/{{address}}/g, cc.Address.replace(/\n$/,"").replace("\n", "<br>"))
                           .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(/{{last4}}/g, cc.Last4)
                           .replace(/{{type}}/g, cc.Type)
                           .replace(/{{exp}}/g, cc.ExpirationMonth + "/" + cc.ExpirationYear)

      this.$address_list.append(address_t)
      this.$cc_list.append(cc_t)
    })
  },
  
  success: function(){
    app.router.go('cart/confirm')
  },
  
  cancel: function(){
    app.router.go('cart/shipping')
  },


})