<script setup lang="ts">
import productCard from "./productCard.vue"
import productDetails from "./productDetailsDialog.vue"
import { ref, watch } from "vue";
import { useProductStore } from "@/data/stores/productStore";
import { ProductWithCategoryModel } from "@/data/models/productWithCategoryModel";
import alertBanner from "@/components/alertBanner.vue";
import filterNavDrawer from "./filterNavDrawer.vue";

const productStore = useProductStore()

const showProductDetails = ref(false)
const dialogProduct = ref(new ProductWithCategoryModel())

function showProductDialog(product: ProductWithCategoryModel) {
  dialogProduct.value = product
  showProductDetails.value = true
}

watch(() => productStore.filteredCategory, async () => { productStore.filterProducts() })
watch(() => productStore.sortOrder, async () => { productStore.sortProducts() })
watch(() => productStore.onlyDiscounts, async () => { productStore.filterProducts() })
</script>

<template>
  <v-container max-width="1000">
    <v-row>
      <v-col>
        <alert-banner />
      </v-col>
    </v-row>
    
    <v-row dense>
      <v-col
        v-if="productStore.filteredProducts.length > 0"
        v-for="product in productStore.filteredProducts"
        cols="12"
      >
        <product-card
          :product="product"
          @click="showProductDialog(product)"
        />
      </v-col>
      
      <v-col v-else>
        <v-empty-state
          icon="mdi-magnify"
          headline="Keine Artikel gefunden"
        />
      </v-col>
    </v-row>
  </v-container>

  <filter-nav-drawer />

  <product-details
    v-model="showProductDetails"
    :product="dialogProduct"
  />
</template>