<template>
  <product-template>
    <template #product-new-action>
      <add-button text="Ajouter" @click="goToProduct" />
    </template>
    <template #select-filter>
      <filter-table />
    </template>
    <template #product-other-action>
      <table-action />
    </template>
    <template #product-table>
      <product-table
        :data="productData"
        :loading="loadingData"
        @view="goToDetails"
        @edit="goToEdit"
        @delete="deleteProduct"
      />
    </template>
  </product-template>
</template>

<script setup>
import ProductTemplate from "@/components/templates/Stock/ProductTemplate.vue";
import ProductTable from "@/components/molecules/Tables/Stock/ProductTable.vue";
import addButton from "@/components/molecules/new-button/addButton.vue";
import FilterTable from "@/components/molecules/Tables/FilterTable.vue";
import TableAction from "@/components/molecules/Tables/TableAction.vue";
import { defineProps, defineEmits } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const emit = defineEmits(["pushDetails", "deleteProduct"]);

defineProps({
  productData: {
    type: Array,
    default: [],
  },
  loadingData: {
    type: Boolean,
    default: false,
  },
});

const goToProduct = () => {
  router.push({
    name: "Creation produit",
  });
};

const goToDetails = (product) => {
  console.log(product);
  router.push({
    name: "Product details",
    params: {
      id: product,
    },
  });
};

const goToEdit = (product) => {
  router.push({
    name: "Modification produit",
    params: {
      id: product.id,
    },
  });
};

const deleteProduct = (product) => {
  emit("deleteProduct", product);
};
</script>
