<template>
    <div class="wContainer">
        <catalog-breadcrumbs></catalog-breadcrumbs>
        <div class="innerContainer size">
            <div class="row">
                <!--catalog filters-->
                <div class="col-xs-3">
                    <!--for instruments-->
                    <div class="sidebarFilters">
                        <div class="sidebarFilters__wrapper" v-if="sidebarFilters">
                            <div class="sideFilterBlock" v-for="filterItem in sidebarFilters">
                                <catalog-checkboxes-component :key="selectedFiltersNumber"
                                                              :is="filterItem.component"
                                                              :slug="filterItem.slug"
                                                              :name="filterItem.name"
                                                              :filters="filterItem.data"
                                                              :parameteres = "catalogFilters"
                                                              @setFilters="setCatalogFilters($event)"/>

                                <catalog-range v-if="filterItem.data"
                                               :is="filterItem.component"
                                               :max="filterItem.data.max"
                                               :min="filterItem.data.min"

                                               @filter="priceAmount = $event"/>
                            </div>
                        </div>
                        <div class="sidebarFilters__clear" @click="resetFilter"><span class="js-resetAll">Сбросить фильтр</span></div>
                    </div>

                    <!--for breaks -->
                </div>

                <!--catalog view-->
                <div class="col-xs-9">
                    <div class="categoryBlock">
                        <div class="categoryBlock__titleLine">
                            <h1 v-if="category == 'tire'" class="mainContentTitle">Легковые шины</h1>
                            <h1 v-if="category == 'discs'" class="mainContentTitle">Диски</h1>
                            <h1 v-if="category == 'brake'" class="mainContentTitle">Тормозная система</h1>
                            <h1 v-if="category == 'instruments'" class="mainContentTitle">Наборы инструментов</h1>
                            <div class="categoryBlock__sort">
                                <label>Сортировать</label>
                                <select-component :title="'Сортировать'" :options="['по стоимости', '215 / 65/ R17 V', '225 / 55/ R17 V']"></select-component>

                            </div>
                        </div>

                        <div class="categoryBlock__list row" v-if="getCargoPerPage">
                            <div class="col-xs-4" v-for="item in getCargoPerPage">
                                <catalog-card :cat="category" :description="item" :key="item['Product ID']"></catalog-card>
                            </div>
                        </div>
                        <div class="pagination" v-if="catalog && pages">
                            <paginator v-if="pages.length > 1" @pagination="page = $event" :page="page" :amount="pages" :key="pages.length"></paginator>
                        </div>
                        <div class="info-box info green" v-if="getCargoPerPage.length == 0 && sidebarFilters">
                            <p>По заданой фильтрации, список пуст.</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="favoritePage">
            <div class="favoritePage__inner">
                <div class="favoritePage__topLine">
                    <h1 class="mainContentTitle">Просмотренные товары</h1>
                </div>
                <div class="favoritePage__list" v-if="visitedProducts">
                    <!--Temp solution-->
                    <div class="col-xs-3" v-for="item in visitedProducts">
                        <catalog-card :cat="category" :description="item" :key="item.product_id"></catalog-card>
                    </div>

                    <!--flexbox fix add this blocks =(countItemsInRow - 1)-->
                    <div class="sellItem hidden"></div>
                    <div class="sellItem hidden"></div>
                    <div class="sellItem hidden"></div>
                </div>
            </div>
        </div>
        <!-- .wConteiner -->
    </div>
</template>

<script>
    var CheckboxFilter = require('../components/catalog-checkboxes-component.vue');
    var RangeFilter    = require('../components/catalog-range.vue');

    module.exports = {
        data: function(){
            return {
                page: 1,
                priceAmount: false,
                isFiltering: false,
                catalogFilters : {},
                selectedFiltersNumber: false
            }
        },
        // Do not like this solution. Need to be fixed
        created: function (){
            this.getFilteringData();


            if (Object.keys(this.$route.query).length) {
                this.catalogFilters = this.$route.query;


                if (this.$route.params.category == 'tire') {
                    this.catalogFilters = {
                        brand: [],
                        width: [],
                        height: [],
                        price: {}
                    };
                    this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'filter_tires_products' ,
                        filtration: $.param(this.catalogFilters),
                        offset: 0,
                        limit: 18});

                }
                if (this.$route.params.category == 'discs') {
                    this.catalogFilters = {
                        brand: [],
                        width: [],
                        krepezh: [],
                        diameter: [],
                        pcd1: [],
                        et: [],
                        dia: [],
                        price: {}
                    };
                    this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'filter_discs_products' ,
                        filtration: $.param(this.catalogFilters),
                        offset: 0,
                        limit: 18});
                }
            } else {
                this.$store.dispatch('catalog/updateVisitedProducts');

                if (this.$route.params.category == 'tire') {
                    this.$store.dispatch('catalog/updateCatalogFilters', {category: 'get_tires_filters'});
                    this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_tires_products' , offset: 0, limit: 18});
                }
                if (this.$route.params.category == 'discs') {
                    this.$store.dispatch('catalog/updateCatalogFilters', {category: 'get_discs_filters'});
                    this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_discs_products' , offset: 0, limit: 18});
                }
            }
        },
        mounted: function(){
            var that = this;
            var catalogCategory = that.$route.params.category;


            if (this.$route.params.category == 'tire') {
                this.catalogFilters = {
                    brand: [],
                    width: [],
                    height: [],
                    price: {}
                };


            }
            if (this.$route.params.category == 'discs') {
                this.catalogFilters = {
                    brand: [],
                    width: [],
                    krepezh: [],
                    diameter: [],
                    pcd1: [],
                    et: [],
                    dia: [],
                    price: {}
                };

            }


        },
        computed: {
            category: function(){
                return this.$route.params.category;
            },
            categoryInfo: function() {

                if (this.category == 'tire') {

                    return this.$store.state.catalog.tiresFilters;
                }
                if (this.category == 'discs') {
                    return this.$store.state.catalog.discsFilters;
                }
            },
            sidebarFilters: function() {
                if (this.category === 'tire' && this.categoryInfo && this.categoryInfo['prices']) {

                    return [
                        {
                            slug: 'brand',
                            name: 'Производители',
                            data:  this.categoryInfo.brands,
                            component: CheckboxFilter
                        }, {
                            slug: 'prices',
                            name: 'Цена',
                            data:  this.categoryInfo['prices'],
                            component: RangeFilter
                        }, {
                            slug: 'width',
                            name: 'Ширина',
                            data:  this.categoryInfo.widths,
                            component: CheckboxFilter
                        }, {
                            slug: 'height',
                            name: 'Высота профиля',
                            data:  this.categoryInfo.heights,
                            component: CheckboxFilter
                        }, {
                            slug: 'season',
                            name: 'Сезонность',
                            data:  this.categoryInfo.seasons,
                            component: CheckboxFilter
                        }
                    ];
                }
                if (this.category === 'discs' && this.categoryInfo) {
                    return [
                        {
                            slug: 'brand',
                            name: 'Производители',
                            data:  this.categoryInfo.brands,
                            component: CheckboxFilter
                        }, {
                            slug: 'prices',
                            name: 'Цена',
                            data:  this.categoryInfo['prices'],
                            component: RangeFilter
                        }, {
                            slug: 'width',
                            name: 'Ширина',
                            data:  this.categoryInfo.widths,
                            component: CheckboxFilter
                        }, {
                            slug: 'krepezh',
                            name: 'Крепеж',
                            data:  this.categoryInfo.krepezh,
                            component: CheckboxFilter
                        }, {
                            slug: 'diameter',
                            name: 'Диаметр диска',
                            data:  this.categoryInfo.diameters,
                            component: CheckboxFilter
                        }, {
                            slug: 'pcd1',
                            name: 'PCD',
                            data:  this.categoryInfo.pcd1,
                            component: CheckboxFilter
                        }, {
                            slug: 'et',
                            name: 'ET',
                            data:  this.categoryInfo.et,
                            component: CheckboxFilter
                        }, {
                            slug: 'dia',
                            name: 'DIA',
                            data:  this.categoryInfo.dia,
                            component: CheckboxFilter
                        },
                    ];
                }

            },
            getCargoPerPage: function(){
                return this.$store.getters['catalog/getCatalogPerPage'];
            },
            getPriceAmount: function(){
                return this.$store.state.catalog.priceAmount;
            },

            pages: function() {
                var content  = parseInt(this.$store.state.catalog.pageAmount);

                var total= [];
                var total_amount = content;

                if (content) {
                    for(var i = 0; i < content / 18; i++) {
                        total.push(i +1);
                    }
                    return total;
                }
            },
            visitedProducts: function(){
                return this.$store.state.catalog.visitedProducts;
            }
            // FILTERING

        },
        methods: {
            checkboxFilter : function(products, filters, param) {
                return products.filter(function(item){
                    return filters.find(function(filteringItem) {
                        return filteringItem === item[param];
                    })
                });
            },
            resetPrice: function() {
                var catalogCategory = this.$route.params.category;
                var that = this;
                if (catalogCategory == 'tire') {
                    if (that.$store.getters['catalog/getTirePriceAmount']) {
                        that.priceAmount = that.$store.getters['catalog/getTirePriceAmount'];
                    }
                }
                if (catalogCategory == 'discs') {
                    if (that.$store.getters['catalog/getTirePriceAmount']) {
                        that.priceAmount = that.$store.getters['catalog/getDiscsPriceAmount'];
                    }
                }

                this.$forceUpdate();

            },
            getFilteringData: function(){
                if (this.$route.params.category == 'tire') {
                    this.$store.dispatch('catalog/updateCatalogFilters', {category: 'get_tires_filters'});
                }
                if (this.$route.params.category == 'discs') {
                    this.$store.dispatch('catalog/updateCatalogFilters', {category: 'get_discs_filters'});
                }
            },
            resetFilter: function() {
                this.resetPrice();
                this.resetCargoPerPage();
                this.getFilteringData();
                this.selectedFiltersNumber = this.selectedFiltersNumber + 1;
                this.catalogFilters = {};
            },
            resetCargoPerPage: function() {
                if (this.$route.params.category == 'tire') {
                    this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_tires_products',
                        offset: 0,
                        limit: 18});
                }
                if (this.$route.params.category == 'discs') {
                    this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_discs_products' ,
                        offset: 0,
                        limit: 18});
                }
            },
            // filters
            setCatalogFilters: function(e){
                this.page = 1;

                // Get Filtered Products
                this.catalogFilters = e;

                // Is filtering now
                this.isFiltering = this.isFilteringNow();

                if (this.$route.query) {
                    var that = this;
                    console.log(this.$route.query);

                    Object.keys(this.$route.query).forEach(function(item){

                        var index = Object.keys(that.$route.query).indexOf(item);

                        that.catalogFilters[item] = [Object.values(that.$route.query)[index]];
                        console.log(item);
                    });
                    console.log(this.catalogFilters);
                }

                // Get products depending on filtration
                if (this.isFiltering) {
                    if (this.$route.params.category == 'tire') {
                        console.log(this.catalogFilters);
                        console.log($.param(this.catalogFilters));
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'filter_tires_products' ,
                            filtration: $.param(this.catalogFilters),
                            offset: 0,
                            limit: 18});
                    }
                    if (this.$route.params.category == 'discs') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'filter_discs_products' ,
                            filtration: $.param(this.catalogFilters),
                            offset: 0,
                            limit: 18});
                    }

                } else {
                    if (this.$route.params.category == 'tire') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_tires_products' ,
                            offset: 0,
                            limit: 18});
                    }
                    if (this.$route.params.category == 'discs') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_discs_products' ,
                            offset: 0,
                            limit: 18});
                    }

                }
            },
            isFilteringNow: function() {
                var result = false;

                Object.values(this.catalogFilters).forEach(function(item){
                    console.log(item);
                    console.log(typeof(item));
                    console.log(!isEmpty(item));
                    result = result || !isEmpty(item);
                });

                return result;
            },
            updateCatalogContent: function() {
                console.log(this.catalogFilters);
                console.log(this.catalogFilters.length);

            }
        },
        watch: {
            page: function(changed) {
                this.updateCatalogContent();
                if (this.priceAmount) {
                    this.catalogFilters.price = {from: Math.round(changed.from), to: Math.round(changed.to)};
                }

                console.log(this.catalogFilters.length != 0);
                console.log(this.catalogFilters);


                if (this.catalogFilters.length != 0) {
                    if (this.$route.params.category == 'tire') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'filter_tires_products' ,
                            filtration: $.param(this.catalogFilters),
                            offset: this.page * 18 -18,
                            limit: 18});
                    }
                    if (this.$route.params.category == 'discs') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'filter_discs_products' ,
                            filtration: $.param(this.catalogFilters),
                            offset: this.page * 18 -18,
                            limit: 18});
                    }

                } else {
                    if (this.$route.params.category == 'tire') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_tires_products' ,
                            offset: this.page * 18 -18,
                            limit: 18});
                    }
                    if (this.$route.params.category == 'discs') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_discs_products' ,
                            offset: this.page * 18 -18,
                            limit: 18});
                    }

                }
            },
            category: function(updated){
                if (updated) {
                    this.resetFilter();
                }
            },
            '$route' : function () {
                this.getFilteringData();
                this.resetFilter();
                if (this.$route.query) {
                    console.log(this.$route.query);
                    for(var item in this.$route.query) {
                        console.log(item);
                    }
                }
            },
            priceAmount: function(changed) {
                this.catalogFilters.price = {from: Math.round(changed.from), to: Math.round(changed.to)};

                if (Object.keys(this.catalogFilters).length ) {
                    this.isFiltering = true;
                    if (this.$route.params.category == 'tire') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'filter_tires_products' ,
                            filtration: $.param(this.catalogFilters),
                            offset: this.page * 18 -18,
                            limit: 18});
                    }
                    if (this.$route.params.category == 'discs') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'filter_discs_products' ,
                            filtration: $.param(this.catalogFilters),
                            offset: this.page * 18 -18,
                            limit: 18});
                    }

                } else {
                    this.isFiltering = false;
                    if (this.$route.params.category == 'tire') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_tires_products' ,
                            offset: 0,
                            limit: 18});
                    }
                    if (this.$route.params.category == 'discs') {
                        this.$store.dispatch('catalog/updateCargoPerPage',   {category: 'get_discs_products' ,
                            offset: 0,
                            limit: 18});
                    }
                }
            },
            isProductsloaded: function(changed) {
                var that = this;
                var catalogCategory = that.$route.params.category;
                if (catalogCategory == 'tire') {
                    if (that.$store.getters['catalog/getTirePriceAmount']) {
                        that.priceAmount = that.$store.getters['catalog/getTirePriceAmount'];
                    }
                }
                if (catalogCategory == 'discs') {
                    if (that.$store.getters['catalog/getTirePriceAmount']) {
                        that.priceAmount = that.$store.getters['catalog/getDiscsPriceAmount'];
                    }
                }
            },

            // filters

            isFiltering: function(changed) {

            }
        },
        components: {
            'catalog-card':        require('../components/catalog-card.vue'),
            'catalog-breadcrumbs': require('../components/catalog-breadcrumbs.vue'),
            'catalog-range':       require('../components/catalog-range.vue'),
            'select-component':    require('../components/select.vue'),
            'paginator':           require('../components/paginator.vue'),
            'catalog-checkboxes-component':           require('../components/catalog-checkboxes-component.vue')
        }
    };

    function isEmpty(obj) {
        for(var key in obj) {
            if(obj.hasOwnProperty(key))
                return false;
        }
        return true;
    }
</script>