$ = require('jquery')
_ = require('lodash')
Backbone = require('backbone')
Backbone.$ = $;
Facetr = require('backbone.facetr')
ProductModel = require('../models/ProductModel')
PriceFilterSlider = require('./PriceFilterSlider')
ProductsCollection = require('../collections/ProductsCollection')
FilterFacetsController = require('./FilterFacetsController')
require('lazyimg')

class ProductFilterController extends Backbone.View

  el: null

  defaults:
    sidebarActiveClass: 'active'
    sidebarElement: ''
    productElem: '.js-product'
    facetElem: ''

  events:
    "click .js-filter-toggler": "toggleSidebar"

  initialize: (options) ->
    @options = _.extend({}, @defaults, options)

    # Initialize Products Collection
    @productsCollection = new ProductsCollection()
    @cgCollection = new ProductsCollection()
    @sizeCollection = new ProductsCollection()
    @facetsController = new FilterFacetsController()

    @priceSlider = new PriceFilterSlider({
      el: '.js-price-slider'
    })

    # Listen for FilterStateModel change
    @listenTo Backbone, "filter:set", @setFilter
    @listenTo Backbone, "filter:unset", @resetFilter
    @listenTo @priceSlider, 'priceSlider:stop', @filterByPrice

    # Get Products from DOM
    @getProducts()

  # Get All the Products from DOM
  getProducts: ->
    $(@options.productElem).each (index, element) =>
      @addProductToCollection(index, element)

  # Create Product model and add to Products Collection
  addProductToCollection: (index, element) ->
    data = $(element).data('productattrs')
    product = new ProductModel({
      id: parseInt(data.id)
      index: parseInt(index)
      published: parseInt(data.published)
      sold: parseInt(data.sold)
      price: parseInt(data.price)
      size: _.values(data.size)
      cg: _.values(data.cg)
    })

    # Initialise secondary collections for determining availability
    @cgCollection.add(product)
    # We need to add an empty facet for colours to get the list of available. We don't filter by this, but need it...
    Facetr(@cgCollection).facet('cg')
    @sizeCollection.add(product)
    Facetr(@sizeCollection).facet('size')
    @productsCollection.add(product)

  filterStateModelChange: (model) ->
    for key, val of model.attributes
      for filterVal in val
        Facetr(@productsCollection).facet(key).value(filterVal)
    @showFiltered()

  setFilter: (key, value) ->
    Facetr(@productsCollection).facet(key).value(value)
    if key != 'size'
      Facetr(@sizeCollection).facet(key).value(value)
    if key != 'cg'
      Facetr(@cgCollection).facet(key).value(value)
    @showAvailability()
    @showFiltered()

  resetFilter: (key, filterVal) ->
    Facetr(@productsCollection).facet(key).removeValue(filterVal)
    if key != 'size'
      Facetr(@sizeCollection).facet(key).removeValue(filterVal)
    if key != 'cg'
      Facetr(@cgCollection).facet(key).removeValue(filterVal)
    @showAvailability()
    @showFiltered()

  showAvailability: () ->
    console.log("SHOWING AVAILABILITY");
    filterData = Facetr(@cgCollection).toJSON()
    console.log(filterData)
    found = false
    for item in filterData
      if item.data.name == 'cg'
        found = true
        values = item.values

        for obj in values
          @setFilterAvailability('cg', obj)
    # Not in the list? then it's not filtered, so show everything
    if !found
      @makeFacetFullyAvailable('cg')

    filterData = Facetr(@sizeCollection).toJSON()
    console.log(filterData)
    found = false
    for item in filterData
      if item.data.name == 'size'
        found = true
        values = item.values

        for obj in values
          @setFilterAvailability('size', obj)
    # Not in the list? then it's not filtered, so show everything
    if !found
      @makeFacetFullyAvailable('size')

  makeFacetFullyAvailable: (facetName) ->
    console.log("Making " + facetName + " fully available")
    $("input[data-filter=#{facetName}]").each(input) ->
      input.parent().css("opacity", 1.0)

  setFilterAvailability: (inputName, obj) ->
    value = obj.value
    if value
      input = $("input[data-filter=#{inputName}][data-val='#{value}']")
      if obj.activeCount == 0
        input.parent().css("opacity", 0.5)
      else
        input.parent().css("opacity", 1.0)

  showFiltered: () ->
    $(@options.productElem).hide()
    for product in @productsCollection.models
      productBox = document.getElementById('product-' + product.id).style.display = 'inline-block'
    $(".lazy-img").lazyload()

  filterByPrice: (min, max) ->
    Facetr(@productsCollection).addFilter 'price', (model) =>
      model.get('price') >= min && model.get('price') < max
    # TODO: THIS DOESN'T WORK
    Facetr(@cgCollection).addFilter 'price', (model) =>
      model.get('price') >= min && model.get('price') < max
    Facetr(@sizeCollection).addFilter 'price', (model) =>
      model.get('price') >= min && model.get('price') < max
    @showFiltered()

# Toggle Sidebar Animation
  toggleSidebar: (e) ->
    e.preventDefault()
    $('.products-filter-outer').toggleClass('is-opened')
    $('body').toggleClass('filter--is-opened')

module.exports = ProductFilterController