<script setup>
const props = defineProps(
  {
    setProductFilter: {
      type: Number,
      default: null,
    },
    hideSearch: {
      type: Boolean,
      default: false,
    },
    hideProductColumn: {
      type: Boolean,
      default: false,
    },
    autoLoad: {
      type: Boolean,
      default: false,
    },
  }
);
//const props = defineProps(["setProductFilter", "hideSearch", "autoLoad"]);
import { defineProps } from "vue";
import { useRouter } from "vue-router";
import {
  isLoaded,
  isLoading,
  list,
  loadList,
  metaCurrentPage,
  metaItemsPerPage,
  metaTotalItems,
  setEndpoint,
  setMetaItemsPerPage,
  setPage,
  metaSearch,
  search,
  setFilter,
  setOrder,
  hideSearchField,
  setHideSearchField,
} from "@/components/pagination/paginatedList.vue";
import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
import CategoriesTable from "@/components/displays/superuser/tables/categoriesTable.vue";
import ProductAddonsTable from "@/components/displays/superuser/tables/productAddonsTable.vue";
const router = useRouter();
setEndpoint("/product/options", false);
// Hide the search field, if the hideSearch prop is set
if (props.hideSearch) {
  setHideSearchField(true);
}

// Set the filter to the product id (if it is set)
if (props.setProductFilter) {
  setFilter("product_id", props.setProductFilter, false);
}

if (props.autoLoad) {
  loadList();
}

</script>

<template>
  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage"/>
  <ProductAddonsTable :objects="list" :hideProductColumn="props.hideProductColumn" :product_id="props.setProductFilter ? props.setProductFilter : null" />
  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
  <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
</template>

<style scoped>

</style>