Vue.component('products_carousel', {
template: `

<div>
    <div class="container">
        <div class="card_head" style="padding:0">

            <div id="title">{{title}}</div>

            <div class="loader" v-if="is_loading"></div>
            <div class="the_divider" v-if="!is_loading"></div>


            <div id="side_area">
                <a :href="'https://feehla.com/en/category/0/All/#page=1&categs='+compiled_categs_encoded+'&vendors='+compiled_vendors_encoded+'&tag='+alwasm">View all</a>
            </div>

        </div>
    </div>


    <div class="products_carousel block_area">


        <div class="container">


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


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

                <div class="carousel_area">

                    <div id="go_prev" class="caraction_btn" @click="prevPage" v-if="current_page > 1"><i
                                class="far fa-angle-left"></i></div>
                    <div id="go_next" class="caraction_btn" @click="nextPage"
                         v-if="current_page < products.total_pages"><i class="far fa-angle-right"></i></div>

                    <div class="products_list grid" id="products_list">


                        <div id="items_area" v-bind:class="{'loading_phase': is_loading}">
                            <div class="item_parent_cntnr" v-for="product in products.list">


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


                            </div>
                        </div>

                    </div>

                </div>


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

                <div class="search_no_results">
                    <i class="far fa-meh"></i>
                    <div class="v-divider"></div>
                    No matches found
                </div>

            </div>

        </div>

    </div>


</div>
`,
props: ['url_template', 'search_query', 'site_url', 'title', 'categories_passed', 'vendors_passed','alwasm'],
data:

function () {
return {
current_page: 0,
products: {
total_pages: 0,
categories: [],
list: []
},
categories: [],
compiled_categs: [],
compiled_categs_encoded: '[]',
vendors: [],
compiled_vendors: [],
compiled_vendors_encoded: '[]',
is_loading: true,
checkbox: true,
firstload: true,
is_list: true,
sound: true,
sort_by_model: 'most_recent',
sort_by_list: [
{text: 'Most recent', value: 'most_recent'},
{text: 'Price (lowest to highest)', value: 'price_lth'},
{text: 'Price (highest to lowest)', 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: {
categories_passed: {
handler: function (newVal, oldVal) {
if (this.categories_passed != null) {
this.categories = JSON.parse(this.categories_passed);
this.update_products(true);


}
}
},
vendors_passed: {
handler: function (newVal, oldVal) {
if (this.vendors_passed != null) {
this.vendors = JSON.parse(this.vendors_passed);
this.update_products(true);
}
}
},
current_page: {
handler: function (newVal, oldVal) {
this.update_products(false);
}
}
,
sort_by_model: {
handler: function (newVal, oldVal) {
this.current_page = 1;
this.update_products(false);
}
}
,
categories: {
handler: function (newVal, oldVal) {
this.current_page = 1;
this.update_products(false);
}
,
deep: true
}
,
vendors: {
handler: function (newVal, oldVal) {
this.current_page = 1;
this.update_products(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: {
prevPage() {
this.current_page = this.current_page - 1;
}, nextPage() {
this.current_page = this.current_page + 1;
},
update_products(do_scroll) {


this.load_count++;


var do_update = true;


var thisCompo = this;

// let's laod the next page


// 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 == 2) {
do_update = false;

}


if (do_update) {

thisCompo.is_loading = true;

const params = new URLSearchParams();
params.append('sort_by', thisCompo.sort_by_model);
params.append('categories', thisCompo.compiled_categs_encoded);
params.append('vendors', thisCompo.compiled_vendors_encoded);
params.append('tag', thisCompo.alwasm);
params.append('page_limit', 7);


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 && do_scroll) {

} else {
thisCompo.firstload = false;
}

thisCompo.is_loading = false;


})
.catch(function (error) {
console.log(error);
});
}
}
}
,
created: function () {

this.current_page = 1;

if (this.categories_passed != null) {
this.categories = JSON.parse(this.categories_passed);

this.compiled_categs = [];
var arrayLength = this.categories.length;
for (var i = 0; i < arrayLength; i++) {
var thisCateg = this.categories[i];
if (thisCateg.checked) {
this.compiled_categs.push(thisCateg.id);
}
//Do something
}

this.compiled_categs_encoded = JSON.stringify(this.compiled_categs);


}


if (this.vendors_passed != null) {
this.vendors = JSON.parse(this.vendors_passed);

this.compiled_vendors = [];
var arrayLength = this.vendors.length;
for (var i = 0; i < arrayLength; i++) {
var thisVendor = this.vendors[i];
if (thisVendor.checked) {
this.compiled_vendors.push(thisVendor.id);
}
//Do something
}
this.compiled_vendors_encoded = JSON.stringify(this.compiled_vendors);

}


}
})
;