var CartSummary = ScrollableView.extend({
  
  el: "#cart_summary",
  
  template: $("#cart_summary .template").html(),
  
  events: {
    "click .remove": "remove_item",
  },
  
  data: null,
  
  initialize: function(opt){
    this.parent = opt.parent
    this.$loader = this.$(".loader")
    this.$cart_body = this.$(".cart_body")
    this.$cart_empty = this.$(".cart_empty")
    this.scroller = new IScroll('#cart_summary', app.iscroll_options)

    this.$rows = this.$(".rows")
    this.$subtotal = this.$(".subtotal")
    this.$shipping = this.$(".shipping")
    this.$tax = this.$(".tax")
    this.$total = this.$(".total")
  },
  
  show: function(){
    document.body.className = "cart"
    app.cart.el.className = "summary"
    window.location.hash = "#/cart/summary"
    if (auth.has_cart()) {
      this.load()
    }
    else {
      this.empty()
    }
  },
  
  load: function(){
    this.el.className = "loading"
    app.footer.show("SHIPPING >", "CANCEL")
    sdk.cart.get_status({
      success: this.populate.bind(this),
      error: this.empty.bind(this),
    })
  },
    
  populate: function(data){
    this.data = data

    console.log("CART", data)
    
    if (! data.Cart.Items || data.Cart.Items.length == 0) {
      return this.empty()
    }

    this.updateCounts()
    
    this.$rows.empty()
    
    data.Cart.Items.forEach(function(item){
      var code_ten = item['Code10']
      var code = code_ten.substr(0, 8)
      var size_id = item['Size']

      var $el = $("<div>").addClass("cart_item_row")
      $el.data({
        code: code_ten,
        size: size_id,
      })
      this.$rows.append($el)
      app.product.find(code, function(data, details){
        // console.log(data, details)
        
        var descriptions = app.product.get_descriptions( details )
        // console.log(descriptions)

        var name_partz = descriptions['ModelNames'].split(' ')
        var num = name_partz.shift()
        var title = name_partz.join(' ')
        var type = title_case( descriptions['MicroCategory'] )
        
        var color_name, size_name
        // console.log(code)
        details.Item.ModelColors.some(function(color){
          if (color['Code10'] == code_ten) {
            color_name = color['ColorDescription']
            // console.log(color)
            return true
          }
          return false
        })
        details.Item.ModelSizes.some(function(size){
          if (size['SizeId'] == size_id) {
            // console.log(size)
            size_name = size['Default']['Text']
            size_name = SIZE_LOOKUP[ size_name ] || size_name
            return true
          }
          return false
        })

        var t = this.template
                    .replace(/{{image}}/, sdk.image(item['Code10'], '11_f'))
                    .replace(/{{sku}}/, num)
                    .replace(/{{title}}/, title)
                    .replace(/{{type}}/, type)
                    .replace(/{{size}}/, size_name)
                    .replace(/{{color}}/, color_name)
                    .replace(/{{quantity}}/, 1)
                    .replace(/{{price}}/, as_cash(details.Item.Price.DiscountedPrice))
        $el.data("price", details.Item.Price.DiscountedPrice)
        $el.html(t)
        this.refreshScroller()
      }.bind(this))
    }.bind(this))
    
    this.updateTotals()

    this.el.className = "full"
    this.refreshScroller()
  },
  
  updateCounts: function(){
    app.header.set_cart_count( this.data.Cart.Items.length )
    this.parent.setHeaderCount( this.data.Cart.Items.length )
  },
  
  updateTotals: function(){
    var subtotal = this.data.Cart.Totals.TotalWithoutPromotions
    var shipping_cost = this.data.Cart.DeliveryMethod.Selected.Amount.Total
    var tax = 0
    var total = this.data.Cart.Totals.TotalToPay
    
    this.$subtotal.html( as_cash(subtotal) )
    this.$shipping.html( as_cash(shipping_cost) )
    this.$tax.html( as_cash(tax) )
    this.$total.html( as_cash(total) )
  },
  
  empty: function(){
    app.footer.hide()
    app.header.set_cart_count(0)
    this.parent.setHeaderCount( 0 )
    this.parent.$itemcount.html("0 ITEMS")
    this.el.className = "empty"
  },

  save: function(){
    app.router.go('cart/shipping')
  },
  
  cancel: function(){
    app.router.go('intro')
  },
  
  remove_item: function(e){
    var $el = $( e.currentTarget ).closest(".cart_item_row")
    var data = $el.data()

    console.log(this.data.Cart)

    this.data.Cart.Totals.TotalWithoutPromotions -= data.price
    this.data.Cart.Totals.TotalToPay -= data.price    
    this.data.Cart.Items = this.data.Cart.Items.filter(function(item){
      return ( item['Code10'] !== data.code || item['Size'] !== data.size)
    })
    
    this.updateTotals()    
    this.updateCounts()
    $el.remove()
    this.refreshScroller()
    
    if (this.data.Cart.Items.length == 0) {
      this.empty()
    }
    
    app.curtain.show("loading")
    sdk.cart.delete_item({
      data: {
        Code10: data.code,
        Size: data.size,
      },
      success: function(){
        app.curtain.hide("loading")
      },
    })
  },

})