<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { useStore } from "vuex";
import ProductCard from '../../layouts/productView.vue'
import PageBanner from '../../layouts/pageBanner.vue'
import { useRouter } from "vue-router";
const store = useStore();
const route = useRouter();
let currentParams = ref(route.currentRoute.value.params.categoryName)
let subCategory = computed(() => store.state.subCategory)
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 setting = computed(() => store.state.settings)
let MainNav = computed(() => store.state.MainNav)
let subNavData = computed(() => store.state.subNavData)
let CategoryLoader = computed(() => store.state.CategoryLoader)
let hot_products = computed(() => store.state.hot_product)
let categorySlug = computed(() => store.state.categorySlug)
let HomepageSubcategory = ref([])
let Homepageparentcategory = ref([])
let productLoader = ref(false)
let singleLoadingProductId = ref()
let currentCategory = ref()
let CategoryProduct = ref(0)
let NexturlPage = ref()
let CategoryTotalProducts = ref(0)
const normal = async()=>{
    if(MainNav.value.length > 0){
        MainNav.value.map((p, index)=>{
            if(p.slug == currentParams.value){
                mainCategoryProduct(p.id)
            }
        })
    }else{
        store.dispatch('CategoryLoader', true)
        axios.post('/api/nav-bar-nav').then(response =>{
            response.data.nav.map((p)=>{
                if(p.slug == currentParams.value){
                    mainCategoryProduct(p.id)
                }
            })
        })
    }
    
}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    store.dispatch('mobileMenuHideShow', false)  
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
})
let CurrentSizeValue = reactive({
    'size':'all',
    'filter':'price',
    'page':'sample'
})
let currentASC = ref('ASC')
let currentHighLow = ref('ASC')
let ViewProducts = computed(() => store.state.categoryProduct)
let ViewProductImage = computed(() => store.state.categoryImage)
let ProductNextPage = computed(() => store.state.NextPageUrl)
const mainCategoryProduct = async(id)=>{
    store.dispatch('CategoryLoader', true)
    MainNav.value.map((p, index)=>{
        if(id == p.id){
            MainNav.value[index].category_active = 1
            MainNav.value[index].active = 1
            store.dispatch('categorySlug',p.slug)
        }
    })
    CurrentSizeValue.size = 'all'
    MainCategoryProductCheck()
    return
    await axios.post('/api/check-main-category-product/'+id+'/'+currentASC.value+'/'+currentHighLow.value, CurrentSizeValue).then(response => {
        console.log(response.data)
        store.dispatch('CategoryLoader', false)
        if(response.data.success == false){
            let categoryProduct = []
            let categoryImage = []
            let NextPageUrl = []
            store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage, NextPageUrl])
            return
        }
        let categoryProduct = response.data.data.data
        let categoryImage = ref([])
        if(response.data.currentSize != 'all'){
            response.data.ProdutImage.map((op, index)=>{
                let NewUpdate = {
                    'name':op,
                }
                categoryImage.value.push(NewUpdate)
            })
        }else{
            categoryImage.value= response.data.ProdutImage
        }
        let NextPageUrl = response.data.data.next_page_url
        store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage, NextPageUrl])
        // console.log(response.data.data.next_page_url)
        // ProductNextPage.value = response.data.data.next_page_url
    })
    if(hot_products.value.length == 0){
        await axios.post('/api/hot-selling-product').then(response => {
            let product = response.data
            store.dispatch('hotProducts',product)
        })
    }
}
let AllFilterSize = ref([])
const MainCategoryProductCheck = async()=>{
    MainNav.value.map((p, index)=>{
        if(p.active == 1){
            store.dispatch('CategoryLoader', true)
            axios.post('/api/check-main-category-product/'+p.id+'/'+currentASC.value+'/'+currentHighLow.value, CurrentSizeValue).then(response => {
                AllFilterSize.value = response.data.productAttributeSize
                store.dispatch('CategoryLoader', false)
                if(response.data.success == false){
                    let categoryProduct = []
                    let categoryImage = []
                    let NextPageUrl = []
                    store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage, NextPageUrl])
                    return
                }
                let categoryProduct = response.data.data.data
                let categoryImage = ref([])
                if(response.data.currentSize != 'all'){
                    response.data.ProdutImage.map((op, index)=>{
                        let NewUpdate = {
                            'name':op,
                        }
                        categoryImage.value.push(NewUpdate)
                    })
                }else{
                    categoryImage.value= response.data.ProdutImage
                }
                let NextPageUrl = response.data.data.next_page_url
                store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage, NextPageUrl])
            })
        }
    })
    if(hot_products.value.length == 0){
        await axios.post('/api/hot-selling-product').then(response => {
            let product = response.data
            store.dispatch('hotProducts',product)
        })
    }
}
const ActiveMainNav = async(id)=>{
    MainNav.value.map((p,mindex)=>{
        MainNav.value[mindex].category_active = 0
        MainNav.value[mindex].active = 0
    })
    MainNav.value.map((p, index)=>{
        if(id == p.id){
            CategoryName.value = p.slug
            MainNav.value[index].category_active = 1
            MainNav.value[index].active = 1
            if(subNavData.value[index].length == 0){
                route.push('/category/sample/'+p.slug)
                mainCategoryProduct(MainNav.value[index].id)
            }
        }
    })
}
const ChangetoASC = async(event)=>{
    MainNav.value.map((p, index)=>{
        if(p.slug == currentParams.value){
            mainCategoryProduct(p.id)
        }
    })
}
let currentSize = ref('all')
const ChangeCurrentAsc = async(event)=>{
    MainCategoryProductCheck()
    return
    MainNav.value.map((p, index)=>{
        if(p.active == 1){
            store.dispatch('CategoryLoader', true)
            axios.post('/api/check-main-category-product/'+p.id+'/'+event.target.value+'/'+currentHighLow.value, CurrentSizeValue).then(response => {
                console.log(response.data)
                // currentASC.value = 'ASC'
                store.dispatch('CategoryLoader', false)
                // currentHighLow.value = 'ASC'
                let categoryProduct = response.data.data.data
                let categoryImage = response.data.ProdutImage
                store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage])
            })
        }
    })
}
const ChangeCurrentHighLow = async(directionOrEvent)=>{
let direction
    if (typeof directionOrEvent === 'object' && directionOrEvent.target) {
        direction = directionOrEvent.target.value
    } else {
        direction = directionOrEvent
    }
    if(direction == 'PriceASC'){
        currentASC.value = 'ASC'
        CurrentSizeValue.filter = 'price'
        SelectedFilter.value = 1
    }else if(direction == 'PriceDESC'){
        currentASC.value = 'DESC'
        CurrentSizeValue.filter = 'price'
        SelectedFilter.value = 2
    }else if(direction == 'StockASC'){
        currentHighLow.value = 'ASC'
        CurrentSizeValue.filter = 'stock'
        SelectedFilter.value = 3
    }else if(direction == 'StockDESC'){
        currentHighLow.value = 'DESC'
        CurrentSizeValue.filter = 'stock'
        SelectedFilter.value = 4
    }
    
    MainNav.value.map((p, index)=>{
        if(p.active == 1){
            store.dispatch('CategoryLoader', true)
            axios.post('/api/check-main-category-product/'+p.id+'/'+currentASC.value+'/'+currentHighLow.value, CurrentSizeValue).then(response => {
                console.log(response.data)
                AllFilterSize.value = response.data.productAttributeSize
                store.dispatch('CategoryLoader', false)
                if(response.data.success == false){
                    let categoryProduct = []
                    let categoryImage = []
                    let NextPageUrl = []
                    store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage, NextPageUrl])
                    return
                }
                let categoryProduct = response.data.data.data
                let categoryImage = ref([])
                if(response.data.currentSize != 'all'){
                    response.data.ProdutImage.map((op, index)=>{
                        let NewUpdate = {
                            'name':op,
                        }
                        categoryImage.value.push(NewUpdate)
                    })
                }else{
                    categoryImage.value= response.data.ProdutImage
                }
                let NextPageUrl = response.data.data.next_page_url
                store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage, NextPageUrl])
            })
        }
    })
    // MainCategoryProductCheck()
    return
    MainNav.value.map((p, index)=>{
        if(p.active == 1){
            store.dispatch('CategoryLoader', true)
            axios.post('/api/check-main-category-product/'+p.id+'/'+currentASC.value+'/'+direction, CurrentSizeValue).then(response => {
                console.log(response.data)
                store.dispatch('CategoryLoader', false)
                let categoryProduct = response.data.data.data
                let categoryImage = response.data.ProdutImage
                store.dispatch('CurrentCategoryProductImage', [categoryProduct, categoryImage])
            })
        }
    })
    
}
let ProductLoading = ref(false)
const LoadMoreProduct = async(d)=>{
    if(ProductLoading.value == true){
        return
    }
    ProductLoading.value = true
    await axios.post(d).then(response => {
        let categoryProduct = response.data.data.data
        let categoryImage = response.data.ProdutImage
        let NextPageUrl = response.data.data.next_page_url
        store.dispatch('PushCurrentCategoryProductImage', [categoryProduct, categoryImage,NextPageUrl])
        ProductLoading.value = false
        // ProductNextPage.value = response.data.data.next_page_url
    })
}
let CategoryName = ref(currentParams.value)
const ChangeFilterSize = async(d)=>{
    CurrentSizeValue.size = d
    MainCategoryProductCheck()
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // সুন্দর করে smooth scrolling করবে
    })
    return
}
let SelectedFilter = ref(1)
</script>
<template>
<main class="main">
    <p v-for="(name, index) in MainNav" >
        <PageBanner
        :PageName="'Sample : '+name.category_name"
        v-if="name.category_active == 1"/>
    </p>
    <!-- <PageBanner
        v-for="(name, index) in MainNav"
        :key="index"
        :PageName="name.category_name"
        v-if="name.category_active == 1"/> -->
    <div class="container mt-2">
        <div class="product-top-section">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-3 text-left">
                    <span style="padding: 0 10px;  font-size: 14px; font-weight: 400">Showing {{ ViewProducts.length }} items for <span v-for="k in MainNav"><span style="font-weight:500" v-if="k.category_active == 1">'{{ k.category_name }}'</span></span> </span></div>
                <div class="col-md-6 text-right" style="display:flex; justify-content: right; align-items: center;">
                    <!-- <select @change="ChangeCurrentAsc($event)" v-model="currentASC" class="ml-1">
                        <option value="ASC" :selected="currentASC == 'ASC'">ASC</option>
                        <option value="DESC" :selected="currentASC == 'DESC'">DESC</option>
                    </select> -->
                    <select @change="ChangeCurrentHighLow($event)" class="ml-1">
                        <option value="PriceASC" :selected="SelectedFilter == 1">Price Low-High</option>
                        <option value="PriceDESC" :selected="SelectedFilter == 2">Price High-Low</option>
                        <option value="StockASC" :selected="SelectedFilter == 3">Stock Low-High</option>
                        <option value="StockDESC" :selected="SelectedFilter == 4">Stock High-Low</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="products-container mt-1">
            <div class="row">
                <div class="col-md-3" >
                    <div class="mobile-hide product-categories">
                        <div class="product-category-text category-product-filter">Product Categories</div>
                        <ul style="margin:0 0 0">
                            <li class="category-item category-nav" :class="{active:CategoryName == nav.slug}" @click="ActiveMainNav(nav.id)" v-for="nav in MainNav">{{nav.category_name}}</li>
                        </ul>
                    </div>
                    <hr class="mobile-hide">
                    <div class="filter-by-price mobile-hide">
                        <div class="category-product-filter">Filter by Price</div>
                        <ul style="margin:0 0 0">
                            <li class="category-item" @click="ChangeCurrentHighLow('PriceASC', $event)" :class="{active:SelectedFilter == 1}">Price Low to High</li>
                            <li class="category-item" @click="ChangeCurrentHighLow('PriceDESC', $event)" :class="{active:SelectedFilter == 2}">Price High to Low</li>
                            <li class="category-item" @click="ChangeCurrentHighLow('StockASC', $event)" :class="{active:SelectedFilter == 3}">Stock Low to High</li>
                            <li class="category-item" @click="ChangeCurrentHighLow('StockDESC', $event)" :class="{active:SelectedFilter == 4}">Stock High to Low</li>
                        </ul>
                    </div>
                    <hr class="mobile-hide">
                    <div class="mobile-hide Filter-by-size">
                        <div class="filter-size-text category-product-filter">Filter by Size</div>
                        <ul style="margin:0 0 0">
                            <li class="category-item"  @click="ChangeFilterSize('all')" :class="{active:CurrentSizeValue.size == 'all'}">all</li>
                            <li class="category-item" @click="ChangeFilterSize(k)" :class="{active:CurrentSizeValue.size == k}" v-for="k in AllFilterSize">{{k}}</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="homepageLoader" v-if="CategoryLoader">
                        <div class="product-item accessories lighting sale" v-for="prod in 8">
                            <div class="product product-4">
                                <figure class="product-media">
                                    <a></a>
                                </figure><!-- End .product-media -->
                            </div><!-- End .product -->
                        </div><!-- End .product-item -->
                    </div>
                    <div class="all-product" v-if="!CategoryLoader">
                        <div class="product-item accessories lighting sale" v-for="(product, index) in ViewProducts">
                            <ProductCard
                                :product="product"
                                :productImage="ViewProductImage[index]"
                                :setting="setting"
                                :index = "index"
                            />
                        </div><!-- End .product-item -->
                    </div>
                </div>
            </div>
            <div class="load-more-button text-center" v-if="ProductNextPage"> 
                <span @click="LoadMoreProduct(ProductNextPage)" class="btn" style="cursor:pointer">
                    <span v-if="!ProductLoading">Load More</span>
                    <div v-if="ProductLoading" class="spinner-border" role="status">
                    </div>
                </span>
            </div>
        </div><!-- End .products-container -->
        <div class="product-top-section mt-5 mb-1">
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4 text-center"><span style="padding: 0 10px; border-bottom:1px solid #000; font-size: 25px; font-weight: 400">Hot Selling</span></div>
            </div>
        </div>
        <div class="products-container">
            <div class="all-product hot-product">
                <div class="product-item accessories lighting sale" v-for="(product, index) in hot_products.hot_products">
                         <ProductCard
                                :product="product"
                                :productImage="hot_products.hot_productImages[index]"
                                :setting="setting"
                                :index = "index"
                            />
                </div><!-- End .product-item -->
            </div>
        </div><!-- End .products-container -->
    </div><!-- End .container -->
</main><!-- End .main -->
</template>
<style scoped>
.category-product-filter{
    color:#1a1a1a;
    font-size: 24px;
    padding-left:10px;
    font-weight:500
}
li.category-item{
    cursor:pointer;
    color:#5D5D5D;
    font-size:16px!important;
    font-weight:400;
    padding-left:10px;
}
li.category-item.active{
    color:#26A9E0!important;
}
.main-ul-category:hover{
    background: v-bind(setting.color)!important;
}
.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-item .product-media, .single-product-loader .product-media{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
}
.homepageLoader .product-item .product-media a, .single-product-loader .product-media a{
    width: 100%;
    height: 100%;
    background: #e9edf1;
    background: linear-gradient(90deg, #e9edf1 7%, #eff2f4 12%, #e9edf1 37%);
    background-size: 200% 100%;
    animation: 1.5s shimmer linear infinite;
}
.product.product-4 .product-nav{
    flex-wrap:wrap
}
@keyframes shimmer {
    to {
        background-position-x: -150%;
    }
}
.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);
}
.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;
}
.main-ul-category{
    position: relative;
    border-bottom: 1px solid #4b4848;
    padding: 10px 0px;
    padding-left:20px;
    cursor:pointer;
}
.main-ul-category li{
    cursor: pointer;
}
.main-ul-category.active{
    background:v-bind(setting.color)
}
.main-ul-category.ase:before{
    position:absolute;
    content:'';
    width: 6px;
    height: 2px;
    background: #4b4848;
    top:20px;
    right: 15px;
    transform: rotate(135deg);
}
.main-ul-category.ase:after{
    position:absolute;
    content:'';
    width: 6px;
    height: 2px;
    background: #4b4848;
    top:20px;
    right: 19px;
    transform: rotate(45deg);
}
.sub-ul-category li{
    margin-left:30px;
    border-bottom: 1px solid #4b4848;
}
ul li{
    font-size: 14px;
}
.all-product{
    margin-top:-10px;
}
.sub-ul-category li a{
    color: #fff;
}
.product-item{
    width:33.3%!important;
    max-width:33.3%!important
}
.hot-product .product-item{
    width:25%!important;
    max-width:25%!important
}
@media screen and (max-width: 992px) {
    .hot-product .product-item{
        width:25%!important;
        max-width:25%!important
    }
}
@media screen and (max-width: 500px) {
    .product-image, .product-media{
        height: 160px!important;
    }
    .hot-product .product-item{
        width:50%!important;
        max-width:50%!important
    }
    .product-item{
        width:50%!important; flex: 0 0 50%!important; max-width: 50%!important;
    }
}
</style>