var ProductView = ScrollableView.extend({
  
  el: "#product",
  
  events: {
    "click .fit": "scroll_to_bottom",
    "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")
    this.$fit = this.$(".fit")
    this.$sizing = this.$(".sizing")
  },

  show: function(){
    app.footer.show("ADD TO CART", "BUY NOW")
    document.body.className = "product"
  },
  hide: function(){
  },
  
  item: null,
  details: null,
  size: null,
  color: null,
  code: null,
  is_onesize: false,

  sizes: null,
  colors: null,
  
  cache: {},
  
  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
    }).done(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
    
    console.log(data)
    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)

    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 = title_case( data['MicroCategory'] )
    var price = "$" + data['DiscountedPrice'] + ".00"
    var body = descriptions['EditorialDescription'].replace(/<br>/g, "<br><br>")

    var default_color_id = this.populate_selectors(data, details)

    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.is_onesize = !! this.sizes[1]

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

    this.item = data
    this.details = details['Item']
    this.code = data['DefaultCode10']

    this.color = color
    this.size = size
    
    this.$num.html(num)
    this.$title.html(title)
    this.$type.html(type)
    this.$price.html(price)
    this.$body.html(body)
    
    this.$size.html(size_label)
    if (color_label) {
      this.$color.show().html(color_label)
    }
    else {
      this.$color.hide()
    }

    this.deferScrollToTop()
  },

  get_descriptions: function (details){
    var descriptions = {}
    details['Item']['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
    details['Item']['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 = SIZE_LOOKUP[ size['Default']['Text'] ]
      if (! label && ! size['Default']['Labeled']) {
        label = size['Default']['Text'] + " " + size['Default']['ClassFamily']
      }
      size_lookup[ label ] = size['SizeId']
      console.log( label )
      sizes[ size['SizeId'] ] = {
        id: label,
        label: label.toUpperCase(),
        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
    return default_color
  },

  select_size: function(){
    if (this.is_onesize) { return this.select_color() }
    if (this.item['Sizes'].length == 0) { return }
    var sizes = Object.keys(this.sizes).map(function(key){
      return this.sizes[key]
    }.bind(this))
    app.selector.select(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 colors = Object.keys(this.colors).map(function(key){
      return this.colors[key]
    }.bind(this))
    app.selector.select(colors, function(color){
      this.code = color.code
      this.$color.html(color.label)
    }.bind(this))
  },

  // ADD TO CART
  save: function(){
    this.add_to_cart({ route: false })
  },
  // BUY NOW
  cancel: function(){
    this.add_to_cart({ route: true })
  },
  
  add_to_cart: function(opt){
    auth.deferred_product = { Size: this.size, Code10: this.code }
    if ( ! auth.logged_in() ) {
      app.router.go("account/login")
      app.last_view = app.cart
    }
    else if ( ! auth.has_cart() ) {
      auth.create_cart(function(){
        auth.add_deferred_product_to_cart(function(){
          app.router.go("cart")
        })
      })
    }
    else {
      auth.add_deferred_product_to_cart(function(){
        if (opt.route) {
          app.router.go("cart")
        }
      })
    }
  },
  
  back: function(){
    app.router.go('store')
  },
  
  scroll_to_bottom: function(){
  },
  
  share: function(){
  },

})

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"

*/