var ProductView = ScrollableView.extend({
  el: "#product",

  events: {
    "click .fit": "scroll_to_bottom",
    "click .notAvailableInCanada": "scroll_to_bottom",
    "click .extraMessage": "scroll_to_bottom",
    "change select[name=size]": "select_size",
    "change select[name=color]": "select_color",
    // "click .size": "select_size",
    // "click .color": "select_color",
    "click .share": "share",
    "click .gallery-left": "gallery_left",
    "click .gallery-right": "gallery_right",
  },

  initialize: function () {
    this.gallery = new GalleryView();
    this.scroller = ScrollFactory("#product", app.iscroll_options);

    this.$productHeader = this.$(".product-header");
    this.$title = this.$(".title");
    this.$type = this.$(".type");
    this.$price = this.$(".price");
    this.$size = this.$(".size");
    this.$sizeSelect = this.$(".size select");
    this.$sizeLabel = this.$(".size .label");
    this.$color = this.$(".color");
    this.$colorSelect = this.$(".color select");
    this.$colorLabel = this.$(".color .label");
    this.$share = this.$(".share");
    this.$body = this.$(".body");
    this.$fit = this.$(".fit");
    this.$fitHeader = this.$(".fitHeader");
    this.$notAvailableInCanada = this.$(".notAvailableInCanada");
    this.$extraMessage = this.$(".extraMessage");
    this.$sizing = this.$(".sizing");
    this.$style = this.$(".style");
  },

  show: function () {
    this.showFooter();
    document.body.className = "product";
  },

  hide: function () {
    app.footer.hide();
  },

  showFooter: function () {
    var descriptions = this.details ? this.get_descriptions(this.details) : {};
    if (
      (this.sold_out || this.isNotAvailable) &&
      descriptions["Limited_Edition"]
    ) {
      // this.$extraMessage.html(stripHTML( descriptions['Limited_Edition'] ))
      // this.$extraMessage.show()
      console.log("FOOTER: LIMITED EDITION");
      app.footer.show(stripHTML(descriptions["Limited_Edition"]));
    } else if (this.sold_out) {
      console.log("FOOTER: SOLD OUT");
      app.footer.show("SOLD OUT");
    } else if (this.isNotAvailable) {
      console.log("FOOTER: NOT AVAILABLE");
      app.footer.show("NOT AVAILABLE");
    } else {
      app.footer.show("ADD TO CART", "BUY NOW");
    }
  },

  item: null,
  details: null,
  size: null,
  color: null,
  code: null,
  is_onesize: false,
  fitLargeCodes: {},

  sizes: null,
  colors: null,

  cache: {},

  gallery_left: function () {
    app.product.gallery.previous();
  },
  gallery_right: function () {
    app.product.gallery.next();
  },

  find: function (code, cb) {
    data = app.collection.items[code] || {};
    if (code in this.cache) {
      return cb(data, this.cache[code]);
    }
    sdk.product.item({
      code: code,
      success: function (details) {
        this.cache[code] = details;
        cb(data, details);
      }.bind(this),
    });
  },

  load: function (code, data) {
    this.gallery.reset();
    this.show();
    if (app.view && app.view.hide) {
      app.view.hide();
    }
    app.view = this;
    app.header.set_back(true);

    if (!app.collection.loaded) {
      this.el.className = "loading";
      app.collection.afterFetchCallback = this.load.bind(this, code, data);
      app.collection.fetch();
      return;
    } else {
      app.collection.afterFetchCallback = null;
    }
    window.location.href = "#/store/" + code;

    if (data) {
      app.collection.items[code] = data;
    }

    this.el.className = "loading";
    this.find(code, this.populate.bind(this));
  },

  populate: function (data, details) {
    this.el.className = "";

    console.log(data, details);

    var descriptions = this.get_descriptions(details["Item"]);

    var title = data["ModelNames"] || "";
    var type = title_case(data["MicroCategory"]);
    var price = "$" + data["DiscountedPrice"] + ".00";
    var details_description = descriptions["Details"] || "";
    var editorial = descriptions["EditorialDescription"] || "";
    var body = details_description + " " + editorial;
    // body = body.replace(/<br>/g, "<br><br>").replace(/(<br>)+$/, "")

    var default_color_id = this.populate_selectors(data, details);

    var notAvailableInCanada = !!app.store.NotAvailableInCanada;
    app.product.$notAvailableInCanada.toggle(notAvailableInCanada);

    if (!("Price" in details["Item"])) {
      console.log("NO PRICE, IS NOT AVAILABLE");
      this.isNotAvailable = true;
    } else {
      console.log("FOUND PRICE, IS AVAILABLE");
      this.isNotAvailable = false;
    }

    this.$extraMessage.hide();

    if (this.sold_out || this.isNotAvailable) {
      this.$style.css("opacity", 0);
      this.$color.html("NOT AVAILABLE");
      this.$size.hide();
      this.gallery.populate(data["Code8"], details["Item"]["ImageTypes"]);
    } else {
      this.$style.css("opacity", 1);

      var color = this.colors[default_color_id];
      var color_label = color.label;
      var sizes = this.find_sizes_for_color(default_color_id);
      var size = sizes[0];
      var size_label = this.sizes[size].label;

      this.gallery.populate(color.code, details["Item"]["ImageTypes"]);

      this.color = color;
      this.size = size;

      this.is_onesize = !!this.sizes[1];
      this.set_size_label(size_label);
      this.set_color_label(color_label);
    }

    // console.log(color, color_label, size, size_label)

    this.item = data;
    this.details = details["Item"];
    this.code = data["DefaultCode10"];

    console.log(data["DefaultCode10"]);

    // title += "<br>EXTREME COMPACTING ON NYLON BASE<br>LIMITED EDITION - NUMBERED 01 TO 100"
    if (title.indexOf("<br>") !== -1) {
      var title_lines = title.split("<br>").map(
        function (s) {
          if (s.indexOf("LIMITED EDITION") !== -1) {
            return "<span class='red'>" + s + "</span>";
          }
          return s;
        }.bind(this)
      );
      title = title_lines.join("<br><br>") + "<br>";
    }
    this.$title.html(title);
    this.$type.html(type);
    this.$price.html(price);
    this.$body.html(body);

    // window.FirebasePlugin && window.FirebasePlugin.setScreenName('product:' + code)

    this.$productHeader.toggleClass("wide", title.length > 48);

    var fits_large = !!this.fitLargeCodes[this.code];

    this.showFooter();

    console.log(app.store.FitsLarge, app.store.fitsLargeText);
    if (fits_large) {
      if (
        app.store.FitsLarge === "use_alt_text" &&
        (app.store.FitsLargeText || "").length
      ) {
        var fit_lines = app.store.FitsLargeText.replace(/</g, "&lt;")
          .replace(/>/g, "&rt;")
          .split("\n")
          .join("<br>");
        this.$fitHeader.html(fit_lines);
        this.$fitHeader.show();
      } else {
        this.$fitHeader.hide();
      }

      this.$fit.show();

      if (
        app.store.SizingFooter === "use_alt_text" &&
        (app.store.SizingFooterText || "").length
      ) {
        var sizing_lines = app.store.SizingFooterText.replace(/</g, "&lt;")
          .replace(/>/g, "&rt;")
          .split("\n")
          .join("<br>");
        this.$sizing.html(sizing_lines);
        this.$sizing.show();
      } else if (app.store.SizingFooter === "true") {
        this.$sizing.show();
      }
    } else {
      this.$fitHeader.hide();
      this.$fit.hide();
      this.$sizing.hide();
    }

    this.populate_sizes();
    this.populate_colors();

    this.deferScrollToTop();
  },

  get_descriptions: function (details) {
    var descriptions = {};
    (details["Descriptions"] || []).forEach(function (pair) {
      descriptions[pair.Key] = pair.Value;
    });
    return descriptions;
  },
  find_sizes_for_color: function (color_id) {
    return Object.keys(this.colors[color_id].sizes).sort(function (a, b) {
      var ao = SIZE_ORDER[a.label],
        bo = SIZE_ORDER[b.label];
      return ao < bo ? -1 : ao == bo ? 0 : 1;
    });
  },
  find_colors_for_size: function (size_id) {
    return Object.keys(this.sizes[size_id].colors);
  },

  populate_selectors: function (data, details) {
    var sizes = {},
      colors = {},
      size_lookup = {},
      default_color;

    var modelColors = details["Item"]["ModelColors"] || [];
    console.log("colors:", modelColors.length || "none");

    if (!modelColors.length) {
      this.sold_out = true;
      return;
    } else {
      this.sold_out = false;
    }

    modelColors.forEach(function (color, index) {
      if (!default_color || color["Code10"] == data["DefaultCode10"]) {
        default_color = color["ColorId"];
      }
      colors[color["ColorId"]] = {
        id: color["Code10"],
        code: color["Code10"],
        label: color["ColorDescription"].toUpperCase(),
        sizes: {},
      };
    });

    details["Item"]["ModelSizes"].forEach(function (size) {
      var label = "";
      if (details["Item"]["SizeTypeId"] == 412) {
        // shoes
        label = size["Default"]["Text"] + " " + size["Default"]["ClassFamily"];
        console.log("shoes?", label);
      } else {
        // everything else
        label = SIZE_LOOKUP[size["Default"]["Text"]];
      }
      if (!label) {
        label = size["Default"]["Text"];
        if (size["Default"]["Labeled"]) {
          label += " " + size["Default"]["ClassFamily"];
        }
      }
      console.log(size);
      size_lookup[label] = size["SizeId"];
      console.log(label);
      sizes[size["SizeId"]] = {
        id: label,
        label: label.toUpperCase(),
        value: size["SizeId"],
        colors: {},
      };
    });
    details["Item"]["ModelColorSize"].forEach(function (cs) {
      colors[cs["IdColor"]].sizes[cs["IdSize"]] = true;
      sizes[cs["IdSize"]].colors[cs["IdColor"]] = true;
    });

    this.sizes = sizes;
    this.colors = colors;
    // console.log('populated colors', sizes, colors, default_color)
    return default_color;
  },

  populate_sizes: function () {
    console.log(this.sold_out, this.notAvailable, this.is_onesize, this.item);
    if (this.sold_out) {
      return;
    }
    if (this.notAvailable) {
      return;
    }
    // if (this.is_onesize) { return this.select_color() }
    if (this.details["ModelSizes"].length == 0) {
      return;
    }

    this.$sizeSelect.empty();
    var sizes = Object.keys(this.sizes).forEach(
      function (key) {
        var size = this.sizes[key];
        var option = document.createElement("option");
        option.value = size.value;
        option.innerHTML = size.label;
        if (this.size && size.id === this.size.id) {
          option.selected = true;
        }
        this.$sizeSelect.append(option);
      }.bind(this)
    );
  },

  populate_colors: function () {
    if (this.sold_out) {
      return;
    }
    if (this.notAvailable) {
      return;
    }
    if (this.details["ModelColors"].length == 0) {
      return;
    }
    console.log("populate colors", this.color);

    this.$colorSelect.empty();
    Object.keys(this.colors).forEach(
      function (key) {
        var color = this.colors[key];
        console.log(color);
        var option = document.createElement("option");
        option.value = key;
        option.innerHTML = color.label;
        if (this.color && color.id === this.color.id) {
          option.selected = true;
        }
        this.$colorSelect.append(option);
      }.bind(this)
    );
  },

  select_size: function () {
    console.log(this.colors);
    var value = this.$sizeSelect.val();
    var size = this.sizes[value];
    console.log("size", size);
    this.set_size_label(size.label);
    this.size = size.value;
  },

  select_color: function () {
    var value = this.$colorSelect.val();
    var color = this.colors[value];
    console.log("color", color);
    this.code = color.code;
    this.set_color_label(color.label);
    this.gallery.populate(color.code, this.details["ImageTypes"]);
    this.gallery_right();
  },

  set_size_label: function (size_label) {
    this.$size.show();
    this.$sizeLabel.html(size_label);
    this.$size.attr(
      "aria-label",
      "Tap to select size. Current size: " + size_label
    );
  },

  set_color_label: function (color_label) {
    if (color_label) {
      this.$color.show();
      this.$colorLabel.html(color_label);
      this.$color.attr(
        "aria-label",
        "Tap to select color. Current color: " + color_label
      );
    } else {
      this.$color.hide();
    }
  },

  // ADD TO CART
  save: function () {
    if (this.sold_out) {
      return;
    }
    if (this.notAvailable) {
      return;
    }
    this.add_to_cart({ route: false });
  },
  // BUY NOW
  cancel: function () {
    if (this.sold_out) {
      return;
    }
    if (this.notAvailable) {
      return;
    }
    this.add_to_cart({ route: true });
  },

  add_to_cart: function (opt) {
    var deferred_product = (auth.deferred_product = {
      Size: this.size,
      Code10: this.code,
    });
    console.log("ADDING " + this.size + " " + this.code);
    // if we are not logged in...
    if (!auth.logged_in()) {
      app.router.go("account/login");
      app.last_view = app.cart;
    }
    // if we don't have a cart setup...
    else if (!auth.has_cart()) {
      this.create_cart_and_add_product();
    } else {
      app.curtain.show("loading");
      auth.add_deferred_product_to_cart({
        success: function () {
          if (opt.route) {
            app.router.go("cart");
          } else {
            app.curtain.hide("loading");
          }
        },
        error: function (err) {
          console.log("CART MIGHT BE OLD");
          this.create_cart_and_add_product();
          // console.log(err)
          //
          // // TODO - CART MIGHT BE OLD
          // app.curtain.hide("loading")
          // app.router.go("account/login")
          // auth.deferred_product = deferred_product
          // app.last_view = app.cart
        }.bind(this),
      });
    }
  },

  create_cart_and_add_product: function () {
    app.curtain.show("loading");
    auth.create_cart({
      success: function () {
        auth.add_deferred_product_to_cart({
          success: function () {
            // app.curtain.hide("loading")
            app.router.go("cart");
          },
          error: function () {
            // SHOULD NOT BE A PROBLEM
            console.log("ERROR ADDING PRODUCT TO NEW CART SIMPLE ADD TO CART");
            app.curtain.hide("loading");
            app.router.go("account/login");
            auth.deferred_product = deferred_product;
            app.last_view = app.cart;
          },
        });
      },
      error: function () {
        // ERROR CREATING CART?
        console.log("ERROR CREATING CART");
        auth.log_out();
        app.account.logged_out();
        app.curtain.hide("loading");
        app.router.go("account/login");
        auth.deferred_product = deferred_product;
        app.last_view = app.cart;
      },
    });
  },

  back: function () {
    app.router.go("store");
  },

  scroll_to_bottom: function () {},

  share: function () {
    if (window.plugins && "socialsharing" in window.plugins) {
      window.plugins.socialsharing.share(
        this.item["ModelNames"],
        null,
        null,
        "http://deeplink.me/www.stoneisland.com/store/" + this.code
      );
    }
  },
});

var SIZE_LOOKUP = {
  XS: "X-SMALL",
  S: "SMALL",
  M: "MEDIUM",
  L: "LARGE",
  XL: "X-LARGE",
  XXL: "XX-LARGE",
  "3XL": "3X-LARGE",
  OneSize: "ONESIZE",
};

var SIZE_ORDER = "XS S M L XL XXL 3XL".split(" ");

/*
{
  "Code8": "41504876",
  "BrandName": "STONE ISLAND",
  "DefaultCode10": "41504876MA",
  "MicroCategory": "Jacket",
  "MacroCategory": "COATS & JACKETS",
  "FullPrice": 728,
  "DiscountedPrice": 437,
  "PriceListId": 155702498,
  "ModelNames": "41764 FLOWING CAMO WATRO",
  "Sizes": [
    {
      "Id": 4,
      "Text": "S",
      "ClassFamily": "INT",
      "Labeled": true
    },
    {
      "Id": 6,
      "Text": "L",
      "ClassFamily": "INT",
      "Labeled": true
    },
    {
      "Id": 7,
      "Text": "XL",
      "ClassFamily": "INT",
      "Labeled": true
    },
    {
      "Id": 8,
      "Text": "XXL",
      "ClassFamily": "INT",
      "Labeled": true
    }
  ],
  "Colors": [
    {
      "Id": 3152,
      "Code10": {
        "Id": 6769575,
        "Value": "41504876MA"
      },
      "Description": "Green",
      "MacroColorId": 3152,
      "Rgb": "3C941F"
    }
  ],
  "SizeTypeId": 928,
  "HasFlipSide": false,
  "SeasonOfSale": "PE15",
  "SalesLineId": "126",
  "SalesLine": "18_STONE ISLAND",
  "MarketId": 19,
  "Criteria": {
    "Sizes": [
      "3",
      "5",
      "6",
      "7"
    ],
    "Looks": [],
    "Styles": [],
    "WashTypes": [],
    "WashStories": [],
    "WashCodes": [],
    "Waists": [],
    "Fabrics": [],
    "ColorTypes": [],
    "ModelNames": [],
    "Material": []
  },
  "NoveltyPoints": 0,
  "C10Attributes": [
    {
      "Key": "MFC",
      "Value": "621541764CC-6215-64V0050",
      "C10": "41504876MA"
    }
  ],
  "MacroCategoryId": 224,
  "MicroCategoryId": 1319
},

DESCRIPTIONS:

Age: "Adult"
Appliqué: "Logo detail"
ColoreFoto_ID: "3140"
Composition: "100% Cotton"
CustomsInvoiceDescr: "Woven"
Design: "Solid color"
EditorialDescription: "20081 DATA DRIP PIN<br>Short sleeve T-Shirt in cotton jersey. Garment dyed.<br>Stone Island Compass logo print on the front, made up of a series of numbers."
ItemDescription: "Logo detail<br>Jersey<br>Round collar<br>Solid color<br>"
KeywordDescription: "Logo detail Jersey Round collar Solid color Jersey Woven not made of fur "
Kind of fabric: "Woven"
MFC: "631520081CC-6315-81V0060"
MacroCategory: "POLO SHIRTS & T-SHIRTS"
MadeIn: "Made In Turkmenistan"
MadeInIsoCode: "TN"
MainMaterial: "Cotton"
Material Description: "Jersey"
MicroCategory: "Short sleeve t-shirt"
MicroCategoryPlural: "Short sleeve t-shirts"
ModelFabric: "631520081CC-6315-81"
ModelNames: "20081 DATA DRIP PIN"
Neckline: "Claudine or round collar"

*/