<script setup>
const props = defineProps({
  onlyFromInvoiceCollection: {
    type: Number,
    default: 0
  },
  autoLoad: {
    type: Boolean,
    default: true
  },
  setCustomerFilter: {
    type: Number,
    default: 0
  },
  hideSearch: {
    type: Boolean,
    default: false
  }
})
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 LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
const router = useRouter();
setEndpoint("/orders", false);
// If the customer filter is set, filter the orders by the customer number
if (props.setCustomerFilter > 0) {
  setFilter("customer_id", props.setCustomerFilter);
  console.log("Setting customer filter to: " + props.setCustomerFilter);
}

// Hide the search field
if (props.hideSearch) {
  setHideSearchField(true);
  console.log("Hiding search field");
} else {
  setHideSearchField(false);
}

// If the departmentId is set, in the route, filter the orders by the departmentId
if (router.currentRoute.value.params.departmentId) {
  setOrder("created_at", "desc");
  setFilter("department_id", router.currentRoute.value.params.departmentId, false);
} else {
  setOrder("created_at", "desc");
}

// If the onlyFromInvoiceCollection prop is set, filter the orders by the invoice collection id
if (props.onlyFromInvoiceCollection > 0) {
  setFilter("invoice_collection_id", props.onlyFromInvoiceCollection, false);
}

// Load the list automatically if the autoLoad prop is set
if (props.autoLoad) {
  loadList();
}

</script>

<template>
  <input @input="search($event.target.value)" class="input" type="text" placeholder="Søg i transaktioner" v-if="!hideSearchField"/>
  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
    <template #paginationColumns>
      <!-- Sort by created_at -->
      <div class="column is-narrow my-3">
        <label class="label">Order direction</label>
        <div class="control">
          <div class="select">
            <select @change="setOrder('created_at', $event.target.value); loadList();">
              <option value="asc">Ascending (Oldest first)</option>
              <option value="desc" selected>Descending (Newest first)</option>
            </select>
          </div>
        </div>
      </div>
    </template>
  </PaginationDisplay>
  <OrdersTable :orders="list" />
  <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>