var ProductView = ScrollableView.extend({
  
  el: "#product",
  
  events: {
    "click .size": "select_size",
    "click .color": "select_color",
    "click .share": "share",
  },
  
  initialize: function(){
    this.gallery = new GalleryView ()
    this.scroller = new IScroll('#product', app.iscroll_options)
    
    this.$num = this.$(".num")
    this.$title = this.$(".title")
    this.$type = this.$(".type")
    this.$price = this.$(".price")
    this.$size = this.$(".size")
    this.$color = this.$(".color")
    this.$body = this.$(".body")
  },

  show: function(){
    document.body.className = "product"
  },
  hide: function(){
  },
  
  item: null,
  size: null,
  color: null,
  code: null,
  
  cache: {},
  
  load: function(code, data){
    this.gallery.reset()
    this.show()
    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
    data = data || app.collection.items[code]
    if (code in this.cache) {
      return this.populate(data, this.cache[code])
    }
    else {
      this.el.className = "loading"
    }
    sdk.product.item({
      code: code
    }).done(function(details){
      this.cache[code] = details
      this.populate(data, details)
    }.bind(this))
  },
  
  populate: function(data, details){
    this.el.className = ""
    console.log(data, details)

    var descriptions = {}
    details['Item']['Descriptions'].forEach(function(pair){
      descriptions[pair.Key] = pair.Value
    })
    this.gallery.populate( data['Code8'], details['Item']['ImageTypes'] )

    var name_partz = data['ModelNames'].split(' ')
    var num = name_partz.shift()
    var title = name_partz.join(' ')
    var type = data['MicroCategory'].toUpperCase()
    var price = "$" + data['DiscountedPrice'] + ".00"
    var size = data['Sizes'][0]
    var size_label = SIZE_LOOKUP[size]
    var color = data['Colors'].length && data['Colors'][0]
    var color_label = color && color['Text']
    var body = descriptions['EditorialDescription'].replace(/<br>/g, "<br><br>")
    
    this.item = data
    this.color = color
    this.size = size
    this.code = data['DefaultCode10']
    
    this.$num.html(num)
    this.$title.html(title)
    this.$type.html(type)
    this.$price.html(price)
    this.$size.html(size_label)
    if (color_label) {
      this.$color.show().html(color_label)
    }
    else {
      this.$color.hide()
    }
    this.$body.html(body)
  },

  select_size: function(){
    if (this.item['Sizes'].length == 0) { return }
    var mapped_sizes = this.item['Sizes'].map(function(size){
      return {
        id: size['Id'],
        label: SIZE_LOOKUP[ size['Text'] ],
        value: size,
      }
    })
    app.selector.select(mapped_sizes, function(size){
      this.size = size.value
      this.$size.html(size.label)
    }.bind(this))
  },
  
  select_color: function(){
    if (this.item['Colors'].length == 0) { return }
    var mapped_colors = this.item['Colors'].map(function(color){
      return {
        id: color['Id'],
        label: color['Text'],
        value: color,
      }
    })
    app.selector.select(mapped_colors, function(color){
      this.color = color.value
      this.$color.html(color.label)
    }.bind(this))
  },
  
  share: function(){
  },

})

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


/*

{
  "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"

*/