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

  show: function(){
    this.showFooter()
    document.body.className = "product"
  },
  
  hide: function(){
    app.footer.hide()
  },
  
  showFooter: function(){
    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.gallery.previous()
  },
  gallery_right: function(){
    app.product.gallery.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
    }).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
    
    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)

    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
    }

    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.$size.show().html(size_label)
      if (color_label) {
        this.$color.html(color_label)
      }
      else {
        this.$color.hide()
      }
    }
    
    // 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.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

    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
    return default_color
  },

  select_size: function(){
    if (this.sold_out) { return }
    if (this.notAvailable) { return }
    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("style", sizes, function(size){
      console.log(size)
      this.size = size.value
      this.$size.html(size.label)
    }.bind(this))
  },
  
  select_color: function(){
    if (this.sold_out) { return }
    if (this.notAvailable) { return }
    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("style", colors, function(color){
      this.code = color.code
      this.$color.html(color.label)
      this.gallery.populate( color.code, this.details['ImageTypes'] )
      this.gallery_right()
    }.bind(this))
  },

  // 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(){
          app.curtain.hide("loading")
          if (opt.route) {
            app.router.go("cart")
          }
        },
        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"

*/