var OrdersView = ScrollableView.extend({

  el: "#orders",
  
  loaded: false,
  
  list_template: $("#orders .list_template").html(),
  item_template: $("#orders .item_template").html(),

  events: {
    "click .back": "back",
    "click .item": "load_single",
  },

  initialize: function(){
    this.$list = this.$(".list")
    this.$empty = this.$(".empty")
    this.$single_order = this.$("#single_order")

    this.$rows = this.$(".rows")
    this.$subtotal = this.$(".subtotal")
    this.$shipping = this.$(".shipping")
    this.$tax = this.$(".tax")
    this.$total = this.$(".total")
    
    this.$shipping_address = this.$(".shipping_address")
    this.$shipping_method = this.$(".shipping_method")

    this.scroller = ScrollFactory('#orders', app.iscroll_options)
  },

  show: function(){
    if (! auth.logged_in()) { return app.router.go("intro") }
    if (! navigator.onLine) {
      app.closed.showElement()
      app.closed.setMessage("PLEASE GO ONLINE TO VIEW<br>YOUR ORDERS.", "")
      return
    }
    app.account.consent.check()
    app.header.set_back(false)
    app.footer.hide()
    document.body.className = "orders"
    this.deferScrollToTop()
    this.el.className = ""
    
    if (this.loaded) {
      this.populate()
    }
    else {
      this.fetch()
    }
  },
  
  orders: null,
  orderLookup: {},
  
  fetch: function(){
    this.$list.empty()
    this.$empty.hide()
    this.loader = new Loader(this.ready.bind(this))
    app.curtain.show("loading")
    sdk.account.fetch_orders({
      success: function(data){
        this.loader.register("orders")
        this.orders = data.OrderDetails
        data.OrderDetails.forEach(function(row){
          this.loader.register(row.OrderNumber)
          sdk.account.fetch_single_order({
            id: row.OrderNumber,
            success: function(row_data){
              this.orderLookup[ row.OrderNumber ] = row_data.OrderFullDetails
              this.loader.ready(row.OrderNumber)
            }.bind(this),
            error: function(){
              this.orderLookup[ row.OrderNumber ] = null
              this.loader.ready(row.OrderNumber)
            }.bind(this),
          })
        }.bind(this))
        this.loader.ready("orders")
      }.bind(this),
      error: function(){
        console.log("error fetching orders")
      }.bind(this),
    })
  },
  
  ready: function(){
    this.populate()
    app.curtain.hide("loading")
  },
  
  populate: function(){
    this.$list.empty()

    if (! this.orders.length) {
      this.$empty.show()
      return
    }
    else {
      this.$empty.hide()
    }
    this.orders.forEach(function(row){
      var order = this.orderLookup[ row.OrderNumber ]
      if (! order) { return }
      var t = this.list_template.replace(/{{date}}/g, moment(order['Date']).format("ddd MM/DD/YYYY").toUpperCase())
                                .replace(/{{id}}/g, row.OrderNumber)
                                .replace(/{{total}}/g, as_cash( order.TotalAmount ))
      var $t = $(t), $images = $t.find(".images")
      order.Items.forEach(function(item){
        var img = new Image ()
        img.src = sdk.image(item['Code10'], "11_f")
        $images.append(img)
      }.bind(this))
      this.$list.append($t)
    }.bind(this))

    this.refreshScroller()
  },
  
  load_single: function(e){
    var id = $(e.currentTarget).data("id")
    var order = this.orderLookup[ id ]
    if (! order) { return }
    
    console.log(order)
    
    this.$rows.empty()
    
    order.Items.forEach(function(item){
      var $el = $("<div class='item'><img src='img/spinner.gif'></div>")
      this.$rows.append($el)
      var code_ten = item.Code10

      var code = code_ten.substr(0, 8)
      app.product.find(code, function(data, details){
        var descriptions = app.product.get_descriptions( details )

        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

        details.Item.ModelColors.some(function(color){
          if (color['Code10'] == code_ten) {
            color_name = color['ColorDescription']
            return true
          }
          return false
        })
        size_name = item.DefaultSize + " " + item.DefaultSizeClassFamily

        var t = this.item_template
                    .replace(/{{image}}/, sdk.image(item['Code10'], '11_f'))
                    .replace(/{{sku}}/, num)
                    .replace(/{{title}}/, title)
                    .replace(/{{type}}/, type)
                    .replace(/{{size}}/, size_name || "DEFAULT")
                    .replace(/{{color}}/, color_name || "DEFAULT")
                    .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))
    
    var subtotal = order.ItemsTotalAmount
    var shipping_cost = order.Delivery.Amount
    var tax = order.SalesTaxAmount
    var total = order.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) )

    var street = order.Delivery.Address.replace(/\n$/,"").replace("\n","<br>")
    var address = order.Delivery.Name + "<br>" + street + "<br>" + order.Delivery.City + " " + order.Delivery.ZipCode
    this.$shipping_address.html(address)
    this.$shipping_method.html(order.Delivery.Type + " - " + order.Delivery.Time)
    
    app.header.set_back(true)
    this.$el.addClass("single")
  },

  back: function(){
    app.header.set_back(false)
    this.el.className = ""
  },

})