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 = ScrollFactory("#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";
    app.view = this;
    app.footer.hide();
    console.log("cart show");
    if (auth.has_cart()) {
      this.load();
    } else {
      this.empty();
    }
  },

  load: function () {
    this.el.className = "loading";
    app.footer.show("SHIPPING >");
    app.curtain.show("loading");
    console.log("load cart");
    setTimeout(function () {
      app.curtain.show("loading");
    });
    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.parent.$steps.show();
    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.html("<img src='img/spinner.gif'>");
        $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;
                if (!size_name && !size["Default"]["Labeled"]) {
                  size_name =
                    size["Default"]["Text"] +
                    " " +
                    size["Default"]["ClassFamily"];
                }

                return true;
              }
              return false;
            });

            var t = this.template
              .replace(/{{image}}/, sdk.image(item["Code10"], "11_f"))
              .replace(/{{sku}}/g, num)
              .replace(/{{code8}}/g, data["Code8"])
              .replace(/{{title}}/g, title)
              .replace(
                /{{cleantitle}}/g,
                num +
                  " " +
                  stonewash(title) +
                  " " +
                  (descriptions["MicroCategory"] || "")
              )
              .replace(/{{type}}/, type)
              .replace(/{{size}}/g, size_name)
              .replace(/{{color}}/g, color_name)
              .replace(/{{quantity}}/g, 1)
              .replace(
                /{{price}}/,
                as_cash(details.Item.Price.DiscountedPrice)
              );
            $el.html(t);
            this.refreshScroller();
          }.bind(this)
        );
      }.bind(this)
    );

    if (data.Cart.Receiver && data.Cart.Receiver.City) {
      app.cart.shipping.load_form(data);
    }

    this.updateTotals();

    this.$cart_empty.hide();
    this.el.className = "full";
    this.refreshScroller();
    app.curtain.hide("loading");
  },

  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 = this.data.Cart.Totals.TotalSalesTax;
    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));
    this.$(".subtotal_row").attr("aria-label", "Subtotal " + as_cash(subtotal));
    this.$(".total_row").attr("aria-label", "Total " + as_cash(total));
  },

  empty: function () {
    console.log("cart empty");
    app.footer.hide();
    app.header.set_cart_count(0);
    this.parent.setHeaderCount(0);
    this.parent.$itemcount.html("0 ITEMS");
    this.el.className = "empty";
    this.parent.$steps.hide();
    this.$cart_empty.show();
    app.curtain.hide("loading");
  },

  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("REMOVE FROM CART");
    console.log(data.size + " " + data.code);

    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");
    console.log("loading");
    sdk.cart.delete_item({
      data: {
        Code10: data.code,
        Size: data.size,
      },
      success: function () {
        console.log("success");
        // app.curtain.hide("loading")
        this.load();
      }.bind(this),
      error: function () {
        // app.curtain.hide("loading")
        this.load();
      }.bind(this),
    });
  },
});