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=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.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 )
    }.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)
  },

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

  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.list_mode) {
      address_id = $("[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 = $("[name=CCId]").filter(function(){ return $(this).prop("checked") }).val()
      cc_data = app.account.ccLookup[ cc_id ]
    }
    else {
      cc_data = data
    }
    
    shipping_info.Name = address_data.Name
    shipping_info.Surname = address_data.Surname
    shipping_info.Email = auth.user.Email
    shipping_info.Phone = address_data.Phone
    shipping_info.Mobile = address_data.Phone
    shipping_info.StreetWithNumber = address_data.Address
    shipping_info.PostalCode = address_data.ZipCode
    shipping_info.City = address_data.City
    shipping_info.Province = address_data.Province
    shipping_info.Region = address_data.Province
    shipping_info.CountryCode = "US"
    
    return shipping_info
  },
  
  success: function(){
    app.router.go('cart/confirm')
  },
  
  cancel: function(){
    app.router.go('cart/shipping')
  },


})