<template>
  <section :class="`tp-shop-area pb-120 ${full_width ? 'tp-shop-full-width-padding' : ''}`">
    <div :class="`${full_width ? 'container-fluid' : shop_1600 ? 'container-shop' : 'container'}`">
      <div class="row">
        <div class="col-xl-12">
          <div class="tp-shop-main-wrapper">
            <div class="tp-shop-top mb-45">
              <div class="row">
                <div class="col-xl-6">
                  <div class="tp-shop-top-left d-flex align-items-center">
                    <div class="tp-shop-top-tab tp-tab">
                      <ul class="nav nav-tabs" id="productTab" role="tablist">
                        <li class="nav-item" role="presentation">
                          <button :class="`nav-link ${active_tab === 'grid' ? 'active' : ''}`"
                            @click="handleActiveTab('grid')">
                            <svg-grid />
                          </button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button :class="`nav-link ${active_tab === 'list' ? 'active' : ''}`"
                            @click="handleActiveTab('list')">
                            <svg-list />
                          </button>
                        </li>
                      </ul>
                    </div>
                    <div class="tp-shop-top-result">
                      <p>
                        Mostrando 1-{{ productsStore.filteredProducts?.slice(startIndex, endIndex).length }} de
                        {{ productsStore.products.total }} resultados
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-xl-6">
                  <shop-sidebar-filter-select @handle-select-filter="productsStore.handleSelectFilter" />
                </div>
              </div>
            </div>
            <div class="tp-shop-items-wrapper tp-shop-item-primary">
              <div v-if="active_tab === 'grid'">
                <div class="row infinite-container">
                  <div v-for="item in productsStore.filteredProducts.slice(startIndex, endIndex)" :key="item.id"
                    class="col-xl-3 col-md-4 col-sm-6 infinite-item">
                    <product-fashion-product-item :item="item" :spacing="true" />
                  </div>
                </div>
              </div>

              <div v-if="active_tab === 'list'">
                <div class="row">
                  <div class="col-xl-12">
                    <product-list-item v-for="item in productsStore.filteredProducts.slice(
                      startIndex,
                      endIndex
                    )" :key="item.id" :item="item" />
                  </div>
                </div>
              </div>
            </div>

            <div class="tp-shop-pagination mt-20">
              <div v-if="
                productsStore.filteredProducts && productsStore.products.total && productsStore.products.total > 10
              " class="tp-pagination d-flex justify-content-end">
                <ui-pagination :items-per-page="10" :data="productsStore.filteredProducts || []"
                  @handle-paginate="handlePagination" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useProductFilterStore } from "@/pinia/useProductFilterStore";
import { useProductsStore } from "@/pinia/products/products.store";
const route = useRoute();
const props = defineProps<{
  list_style?: boolean;
  full_width?: boolean;
  shop_1600?: boolean;
  shop_right_side?: boolean;
  shop_no_side?: boolean;
}>();

const active_tab = ref<string>(props.list_style ? "list" : "grid");
const store = useProductFilterStore();
const productsStore = useProductsStore();

let filteredProductsItems = ref<any>(productsStore.filteredProducts);
let startIndex = ref<number>(0);
let endIndex = ref<number>(productsStore.filteredProducts.length);

const handlePagination = (data: any, start: number, end: number) => {
  filteredProductsItems.value = data;
  startIndex.value = start;
  endIndex.value = end;
};

function handleActiveTab(tab: string) {
  active_tab.value = tab;
}
</script>
