FSB.catalog = {
    init: function () {
        this.initFilters();
        this.initFilterSwiper();
        $(document).foundation();
    },
    initFilterSwiper: function() {
        var self = this;

        this.appearanceFilterSwiper = new Swiper ('#filter-appearance-swiper', {
            loop: false,
            paginationClickable: true,
            pagination: '#filter-appearance-swiper .swiper-pagination'
        });
        this.structureFilterSwiper = new Swiper ('#filter-structure-swiper', {
            loop: false,
            paginationClickable: true,
            pagination: '#filter-structure-swiper .swiper-pagination'
        });

        $('.products-filter-tabs .tabs').on('change.zf.tabs', function() {
            self.appearanceFilterSwiper.update({
                loop: false,
                paginationClickable: true,
                pagination: '#filter-appearance-swiper .swiper-pagination'
            });
            self.structureFilterSwiper.update({
                loop: false,
                paginationClickable: true,
                pagination: '#filter-structure-swiper .swiper-pagination'
            });
        })
    },
    initFilters: function() {
        this.productsFilters = new Vue({
          el: '#main',
          data: {
            currAppearances: [],
            currStructures: [],
            currFilterBy: 'appearances',
            insideDiameterStart: 12,
            insideDiameterEnd: 140,
            staticloadStart: 3000,
            staticloadEnd: 272000,
            products: []
          },
          methods: {
            fetchProducts: function() {
                this.$http({url: '/catalog/products/', method: 'GET'}).then(function (response) {
                  this.$set('products', response.data);
                });
            },
            switchFilterBy: function(mode) {
                this.currFilterBy = mode;
            },
            isfilteredItems: function(appearanceId, structureId, insideDiameter, staticload) {
                var self = this;
                var isInDiameterRange = _.inRange(insideDiameter, self.insideDiameterStart, self.insideDiameterEnd);
                var isInStaticloadRange = _.inRange(staticload, self.staticloadStart, self.staticloadEnd);
                if (this.currFilterBy == 'appearances' && isInDiameterRange && isInStaticloadRange) {
                    this.currStructures = [];
                    if (this.currAppearances.length > 0) {
                        return _.includes(this.currAppearances, appearanceId);
                    } else {
                        return true;
                    }
                }
                if (this.currFilterBy == 'structures' && isInDiameterRange && isInStaticloadRange) {
                    this.currAppearances = [];
                    if (this.currStructures.length > 0) {
                        return _.includes(this.currStructures, structureId);
                    } else {
                        return true;
                    }
                }
            },
            initSliderFilter: function() {
                var self = this;
                $('#dimension-slider').on('moved.zf.slider', function(){
                    var start = $(this).find('.slider-handle').eq(0).attr("aria-valuenow");
                    var end = $(this).find('.slider-handle').eq(1).attr("aria-valuenow");
                    self.insideDiameterStart = Math.floor(start/100*128) + 12;
                    self.insideDiameterEnd = Math.floor(end/100*128) + 12;
                });
                $('#staticload-slider').on('moved.zf.slider', function(){
                    var start = $(this).find('.slider-handle').eq(0).attr("aria-valuenow");
                    var end = $(this).find('.slider-handle').eq(1).attr("aria-valuenow");
                    self.staticloadStart = Math.floor(start/100*269000) + 3000;
                    self.staticloadEnd = Math.floor(end/100*269000) + 3000;
                });
            }
          },
          ready: function() {
            this.fetchProducts();
            this.initSliderFilter();
          }
        })
    }
}