<script setup>

import CollectedOrderInvoicesTable from "@/components/displays/superuser/tables/collectedOrderInvoicesTable.vue";
const props = defineProps({
  setCustomerFilter: {
    type: Number,
    default: null
  },
  hideSearch: {
    type: Boolean,
    default: false
  },
  autoLoad: {
    type: Boolean,
    default: true
  },
  onlyReadyToInvoice: {
    type: Boolean,
    default: false
  },
  tableProps: {
    type: Object,
    default: () => ({})
  },
  displayClosed: {
    type: Boolean,
    default: true
  },
  displayBooked: {
    type: Boolean,
    default: true
  },
});
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";
const router = useRouter();
if (!props.onlyReadyToInvoice || props.onlyReadyToInvoice === false) {
  setEndpoint("/collected-invoices", false);
} else {
  setEndpoint("/collected-invoices/ready-to-invoice", false);
}
setOrder("closed_at", "asc", false);
// Hide the search field if the prop is set to true
setHideSearchField(props.hideSearch);

if (props.setCustomerFilter) {
  setFilter("customer_number", props.setCustomerFilter, false);
}

if (!props.displayClosed) {
  setFilter("closed_at", 'is_null', false);
}

if (!props.displayBooked) {
  setFilter("booked_invoice_id", 'is_null', false);
}

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

</script>

<template>
  <input @input="search($event.target.value)" class="input" type="text" :placeholder="'Søg efter ' + SessionUser.objects.collectedOrderInvoices.meta.labels.single" v-if="!hideSearchField"/>
  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage"/>
  <collected-order-invoices-table v-bind:objects="list" v-bind:loadList="loadList" v-bind="tableProps"/>
  <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>