<script setup>
import { ref, onMounted, computed } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import ProductCard from '../layouts/productView.vue'
import PageBanner from '../layouts/pageBanner.vue'
import { Store } from 'vuex/dist/vuex.cjs.js';
const route = useRouter();
const store = useStore();
let currentParams = ref(route.currentRoute.value.params.SearchText)
let SearchProduct = computed(() => store.state.SearchProduct)
let SearchProductImage =computed(() => store.state.SearchProductImage)
let parentCategory = computed(() => store.state.parentCategory)
let colors = computed(() => store.state.colors)
let categories = computed(() => store.state.extra_categories)
let products = computed(() => store.state.products)
let parentProducts = computed(() => store.state.parentProducts)
let MainNav = computed(() => store.state.MainNav)
let SearchValue = computed(() => store.state.SearchText)
let setting = computed(() => store.state.settings)
let SearchLoader = computed(() => store.state.SearchLoader)
let nextSearchUrl= computed(() => store.state.nextSearchUrl)
let searchStock = computed(() => store.state.searchInstock)
let HomepageSubcategory = ref([])
let Homepageparentcategory = ref([])
let ReadyproductLoader = ref(false)
let SampleproductLoader = ref(false)
let singleLoadingProductId = ref()
let currentCategory = ref()
let CategoryProduct = ref(0)
let NexturlPage = ref()
let CategoryTotalProducts = ref(0)
let ReadyProducts = ref([])
let SampleProducts = ref([])
let ReadyProductImage = ref([])
let ReadyProductNextPage = ref()
let SampleProductNextPage = ref()
let readyProductSortBy = ref('ASC')
let SampleProductSortBy = ref('ASC')
let sampleProductImage = ref([])
let Slider = ref([])
const normal = async()=>{
    store.dispatch('HeaderSearchBar',false)
    if(SearchProduct.value.length == 0){
        let searchvalue = currentParams.value
        route.push('/search/'+currentParams.value)
        store.dispatch('SearchValue', [searchvalue, searchStock])
    }
    
}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    store.dispatch('mobileMenuHideShow', false)  
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    store.dispatch('CartCompare','0')
    store.dispatch('CartCompare','0px')
    store.dispatch('HeaderFooterOff',true)
})
let ProductLoader = ref(false)
const LoadMoreProduct = async()=>{
    if(SearchLoader.value == true){
        return
    }
    store.dispatch('SearchNextUrl')
}
</script>
<template>
<main class="main">
    <PageBanner
        :PageName="'Search'"
    />
    <div class="container">
        <div class="product-top-section mt-3">
            <div class="row">
                <div class="col-md-12"><span style="padding: 0 10px;  font-size: 17px; font-weight: 500">Search Results : <span class="Search-value">{{ SearchValue }}</span> </span></div>
                <div class="col-md-12"><span style="padding: 0 10px;  font-size: 12px; font-weight: 400">Showing {{ SearchProduct.length }} items for '{{ SearchValue }}'' </span></div>
            </div>
        </div>
        <div class="products-container" v-if="SearchProduct.length == 0">
            <div class="homepageLoader">
                <div class="product-item accessories lighting sale" v-for="prod in 10">
                    <div class="product product-4">
                        <figure class="product-media">
                            <a></a>
                        </figure><!-- End .product-media -->
                    </div><!-- End .product -->
                </div><!-- End .product-item -->
            </div>
        </div><!-- End .products-container -->
        <div class="products-container" v-if="SearchProduct.length > 0">
            <div class="all-product">
                <div class="product-item accessories lighting sale" v-for="(product, index) in SearchProduct">
                    <ProductCard
                        :product="product"
                        :productImage="SearchProductImage[index]"
                        :setting="setting"
                        :index = "index"
                    />
                </div><!-- End .product-item -->
                <div class="more-product"></div>
            </div>
        </div><!-- End .products-container -->
    </div><!-- End .container -->
    <div class="load-more-button pb-3 text-center" v-if="nextSearchUrl"> 
        <span @click="LoadMoreProduct()" class="btn" style="cursor:pointer">
            <span v-if="!SearchLoader">Load More</span>
            <div v-if="SearchLoader" class="spinner-border" role="status">
            </div>
        </span>
    </div>
    
</main><!-- End .main -->
</template>
<style scoped>
.load-more-button span{
    background: v-bind(setting.color)!important;
    opacity:0.7;
    padding: 5px;
    border-radius:5px;
    color:#fff;
}
.load-more-button span:hover{
    opacity:1;
}
.products-container{
    position:relative;
}
.more-container{
    cursor: pointer;
}

.homepageLoader .product-body{
    min-height:80px;
}
.homepageLoader .product-title{
    width: 100%;
    height: 25px;
    background: #e9edf1;
    background: linear-gradient(90deg, #e9edf1 7%, #eff2f4 12%, #e9edf1 100%);
    background-size: 200% 100%;
    animation: 1.5s textshimmer linear infinite;
}
@keyframes textshimmer {
    to {
        background-position-x: -150%;
    }
}
.homepageLoader .product-price{
    width: 100%;
    height: 25px;
    background: #e9edf1;
    background: linear-gradient(90deg, #e9edf1 7%, #eff2f4 12%, #e9edf1 100%);
    background-size: 200% 100%;
    animation: 1.5s priceshimmer linear infinite;
}
@keyframes priceshimmer {
    to {
        background-position-x: -150%;
    }
}
.widget.color{
    position:relative;
}
.colorErrorMsg{
    position: absolute;
    top: 35px;
}
.product-nav-dots{
    height:15px;
}

.product-nav-dots a{
    border: 2px solid #ccc;
}
.product-nav-dots a.active{
    border: 2px solid #39f;
}
.homepageLoader .product{
    padding:0!important
}

.cart-dropdown .cart-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    margin-left: .2rem;
    margin-top: .1rem;
    color: #fff;
    background-color: v-bind(setting.color);
}
.Search-value{
    color:v-bind(setting.color);
    font-weight:700;
}
.nav-filter .active a {
    color: v-bind(setting.color)!important;
    border-bottom-color: v-bind(setting.color)!important;
}
a {
    text-decoration: none;
    transition: color 0.3s ease
}
a:hover,
a:focus {
    /* color: #c4782c!important; */
    text-decoration: none
}
.new-price-n{
    font-size: 16px;
    color: v-bind(setting.color);
    font-weight:500;
}
.btn.quick-view{
    margin-top:20px;
    background-color: v-bind(setting.color);
    padding: 5px;
    border-radius:10px;
    color: #fff;
}
.quick-view-btn{
    display: flex;
    justify-content: center;
}
.product-title a:hover,
.product-title a:focus {
    color: v-bind(setting.color)
}
.product{
    box-sizing: border-box;
    transition: 0.3s;
    border: 1px solid transparent;
    border-radius: 10px;
    margin:10px;
    padding-bottom:10px;
}
.homepageLoader .product:hover{
    border: 1px solid #fff
}

</style>