Vue.component('products_view', {
template: `
<div class="row">

    <div class="col-md-3" xs12 md3 v-if="filters_visible" id="filters_area">
        <b-card no-body class="filters_parent">

            <div class="section_head">رتب حسب</div>


            <select class="custom-select" v-model="sort_by_model" style="margin:0 10px;width:200px">
                <option v-for="option in sort_by_list" :value="option.value">{{option.text}}</option>
            </select>

            <div class="section_head">التصنيفات</div>


            <div class="filters_section">

                <div v-for="category in categories" class="filter_item" @click="category.checked = !category.checked">
                    <input type="checkbox" v-model="category.checked" style="display:none" />
                    <i class="far fa-square" v-if="!category.checked"></i>
                    <i class="far fa-check-square" v-if="category.checked"></i> {{category.name_ar}}                </div>


            </div>

            <div class="section_head">المتاجر</div>

            <div class="filters_section">

                <div v-for="vendor in vendors" class="filter_item" @click="vendor.checked = !vendor.checked">
                    <input type="checkbox" v-model="vendor.checked" style="display:none" />
                    <i class="far fa-square" v-if="!vendor.checked"></i>
                    <i class="far fa-check-square" v-if="vendor.checked"></i> {{vendor.name_ar}}                </div>


            </div>

        </b-card>
    </div>

    <div v-bind:class='{ "col-sm-9": filters_visible, "col-sm-12": !filters_visible }'>

        <b-card no-body>

            <div class="products_view_top">
                <div class="products_view_start">


                    <b-button @click="filters_visible_btn = !filters_visible_btn" style="width:100px">
                        <i class="fas fa-filter"></i> Filters
                    </b-button>
                </div>

                <div id="search_container">
                    <i class="fas fa-search"></i>
                    <input type="text" label="Search" single-line v-model="search_query_computed" placeholder="البحث السريع"></input>

                </div>

                <div class="products_view_end">
                    <b-btn @click="is_list = !is_list">
                        <i class="fas fa-th" v-if="is_list"></i>
                        <i class="fas fa-list-ul" v-if="!is_list"></i>
                    </b-btn>

                </div>
            </div>

        </b-card>

        <div v-if="is_loading" class="loader"></div>
        <div style="height:3px" v-if="!is_loading"></div>
        <div class="v-divider"></div>

        <div v-if="products.list.length > 0 && show_results">

            <div>

                <div class="products_list" v-bind:class="{ list: is_list, grid: !is_list, 'elevation-1': is_list }" id="products_list">


                    <div class="row" wrap v-if="!is_list">
                        <div class="col col_container" v-for="product in products.list">

                            <div class="product_container_in_grid" >

                                <product :product="product" :site_url="site_url" :full_width="true"></product>

                            </div>

                        </div>
                    </div>

                    <div v-if="is_list">
                        <b-card no-body>
                            <product v-for="product in products.list" :product="product" :site_url="site_url"></product>
                        </b-card>

                    </div>

                </div>

            </div>

            <div class="v-divider"></div>

            <div class="loader" v-if="is_loading"></div>
            <div style="height:3px" v-if="!is_loading"></div>
            <div class="v-divider"></div>



            <b-pagination-nav base-url="#page=" align="center" :number-of-pages="products.total_pages" v-model="current_page" v-if="products.total_pages > 0" />

        </div>
        <div v-if="(products.list.length < 1 || !show_results) && !is_loading">
            <b-card>

                <div class="search_no_results">
                    <i class="far fa-meh"></i>
                    <div class="v-divider"></div>
                    القائمة فارغة
                </div>

            </b-card>
        </div>
    </div>
</div>
`,
props: ['url_template', 'search_query', 'site_url', 'selected_category_id', 'sort_by'],
data: function () {
return {
page: 0,
tag: '',
current_page: 0,
products: {
total_pages: 0,
categories: [],
list: []
},
categories: [],
vendors: [],
forceCategoriesIDS: null,
forceVendorsIDS: null,
is_loading: true,
checkbox: true,
firstload: true,
silentCategoriesUpdate: false,
silentVendorsUpdate: false,
silentURLUpdate: false,
categoriesRefreshCount: 0,
vendorsRefreshCount: 0,
is_list: true,
sound: true,
sort_by_model: 'relevance',
sort_by_list: [
{text: 'التطابق', value: 'relevance'},
{text: 'أبجدي', value: 'abc'},
{text: 'الأحدث', value: 'most_recent'},
{text: 'السعر (الأقل للأعلى)', value: 'price_lth'},
{text: 'السعر (الأعلى للأقل)', value: 'price_htl'}
],
filters_visible: true,
filters_visible_btn: 0,
show_results: false,
load_count: 0,
search_query_computed: this.search_query,
timeout: null
}
},
watch: {
$route (to, from){
this.show = false;
// console.log("page change detected: "+to);
},
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
//             console.log("before route update");
},
current_page: {
handler: function (newVal, oldVal) {
this.update_products(true);
}
},
sort_by_model: {
handler: function (newVal, oldVal) {
this.current_page = 1;
this.update_products(false);
}
},
categories: {
handler: function (newVal, oldVal) {
if(this.categoriesRefreshCount > 0) {
this.current_page = 1;
this.update_products(false);
}
this.categoriesRefreshCount = this.categoriesRefreshCount+1;
},
deep: true
},
vendors: {
handler: function (newVal, oldVal) {
if(!this.silentCategoriesUpdate) {
this.current_page = 1;
this.update_products(false);
}

this.silentCategoriesUpdate = false;

},
deep: true
},
search_query_computed: {
handler: function (newVal, oldVal) {

this.timeout = null;

// Make a new timeout set to go off in 800ms
var thisThing = this;
this.timeout = setTimeout(function () {
thisThing.firstload = true;
thisThing.load_count = 0;
thisThing.current_page = 1;
thisThing.update_products(false);
}, 500);


// $("#master_search_field").val(newVal);;
},
deep: true
},
filters_visible_btn: {
handler: function (newVal, oldVal) {

this.filters_visible = !this.filters_visible;
}
}
},
methods: {
compileCategs() {
var compiled_categs = [];
var arrayLength = this.categories.length;
for (var i = 0; i < arrayLength; i++) {
var thisCateg = this.categories[i];
if (thisCateg.checked) {
compiled_categs.push(thisCateg.id);
}
//Do something
}
return compiled_categs;
},
compileVendors() {
var compiled_vendors = [];
var arrayLength = this.vendors.length;
for (var i = 0; i < arrayLength; i++) {
var thisVendor = this.vendors[i];
if (thisVendor.checked) {
compiled_vendors.push(parseInt(thisVendor.id));
}
//Do something
}
return compiled_vendors;
},
update_products(do_scroll) {



this.load_count++;


var do_update = true;


var thisCompo = this;

// let's laod the next page

var compiled_categs = thisCompo.compileCategs();
var compiled_vendors = thisCompo.compileVendors();

// if (compiled_categs.length > 0 && compiled_vendors.length > 0) {
do_update = true;
this.show_results = true;
// } else {
//     do_update = false;
//     this.show_results = false;
// }

if (!(this.load_count == 1 || this.load_count > 3)) {
do_update = false;
}

if (do_update || this.firstload) {

thisCompo.is_loading = true;

const params = new URLSearchParams();
params.append('sort_by', thisCompo.sort_by_model);
params.append('categories', JSON.stringify(compiled_categs));
params.append('vendors', JSON.stringify(compiled_vendors));
params.append('tag', thisCompo.tag);
if(this.selected_category_id != null) {
params.append('selected_category_id', this.selected_category_id);
}

if (this.firstload) {
params.append('request_categories_list', true);
params.append('request_vendors_list', true);
}

if (thisCompo.search_query_computed != undefined) {
params.append('search_query', thisCompo.search_query_computed);
}



axios.post(thisCompo.url_template.replace('{page_number}', thisCompo.current_page), params)
.then(function (response) {


thisCompo.products = response.data.data;
if (thisCompo.firstload) {
thisCompo.categories = response.data.data.categories;
thisCompo.vendors = response.data.data.vendors;




}
if (!thisCompo.firstload && do_scroll) {
$("#products_list").goTo();
} else {
thisCompo.firstload = false;
}



thisCompo.is_loading = false;

thisCompo.updateTheURL();

if(thisCompo.forceCategoriesIDS != null) {

var changeHappened = false;


// console.log("doing the manual checking after force was applied");
var finalCategs = [];
var arrayLength = thisCompo.categories.length;
// console.log("categs length: "+arrayLength);
for (var i = 0; i < arrayLength; i++) {
var thisCateg = thisCompo.categories[i];
// console.log("this categ: "+thisCateg);

var checked = (thisCompo.forceCategoriesIDS.indexOf(thisCateg.id) > -1);
if(checked) {
changeHappened = true;
}

thisCateg.checked = checked;
finalCategs.push(thisCateg);
}
// thisCompo.silentCategoriesUpdate = false;

thisCompo.categories = finalCategs;
thisCompo.forceCategoriesIDS = null;

if(thisCompo.forceVendorsIDS != null) {



var finalVendors = [];
var arrayLengthVendors = thisCompo.vendors.length;


for (var i2 = 0; i2 < arrayLengthVendors; i2++) {
var thisVendor = thisCompo.vendors[i2];

var checked = (thisCompo.forceVendorsIDS.indexOf(parseInt(thisVendor.id)) > -1);
if(checked) {
changeHappened = true;
}

// console.log(thisVendor.id + " - "+thisVendor.name_en+" is "+checked);

thisVendor.checked = checked;
finalVendors.push(thisVendor);
}
// thisCompo.silentCategoriesUpdate = false;

thisCompo.vendors = finalVendors;
thisCompo.forceVendorsIDS = null;

}

if(changeHappened) {
thisCompo.update_products(false);
}

}



})
.catch(function (error) {
console.log(error);
});




}
},
fetchTheURL() {
if(!this.silentURLUpdate) {
var hash = window.location.hash.substr(1);

var result = hash.split('&').reduce(function (result, item) {
var parts = item.split('=');
result[parts[0]] = parts[1];
return result;
}, {});

var foundSomething = false;

if(result['tag'] != undefined) {
// console.log("requesting force to set vendors");
console.log("got the tag: "+result['tag']);
this.tag = result['tag'];
}

if (result['page'] != undefined) {
foundSomething = true;
// console.log("setting page to: " + result['page']);
this.page = result['page'];
this.current_page = result['page'];
}

if(result['categs'] != undefined) {
// console.log("requesting force to set categories");
this.forceCategoriesIDS = JSON.parse(result['categs']);
}

if(result['vendors'] != undefined) {
// console.log("requesting force to set vendors");
this.forceVendorsIDS = JSON.parse(result['vendors']);
}



if (!foundSomething) {
this.categoriesRefreshCount = 4;
this.vendorsRefreshCount = 4;
}


// console.log(result);
}
this.silentURLUpdate = false;
},
updateTheURL() {

this.silentURLUpdate = true;


var compiled_categs = this.compileCategs();

var compiled_vendors = this.compileVendors();

var finalLocation = document.location.href.split('#')[0]+"#page="+this.current_page+"&categs="+JSON.stringify(compiled_categs)+"&vendors="+JSON.stringify(compiled_vendors);
if(this.tag != '') {
finalLocation = finalLocation+"&tag="+this.tag;
}
document.location = finalLocation;
}
},
created: function () {

this.current_page = 1;


this.fetchTheURL();
var thisThis = this;
$(window).on('hashchange', function() {
thisThis.fetchTheURL();
});


if ($(window).width() <= 768) {
this.filters_visible_btn = '';
}

if(this.sort_by != null) {
this.sort_by_model = this.sort_by;
}

}
});