<script setup>

import CollectedOrderInvoicesTable from "@/components/displays/superuser/tables/collectedOrderInvoicesTable.vue";

let props = defineProps({
  setCustomerFilter: {
    type: Function,
    default: () => {},
  },
  hideSearch: {
    type: Boolean,
    default: false,
  },
  autoLoad: {
    type: Boolean,
    default: true,
  },
  invoicePerOrder: {
    type: Boolean,
    default: false,
  },
});
import {defineProps, ref, watch} from "vue";
import { useRouter } from "vue-router";
import {
  isLoaded,
  isLoading,
  list,
  loadList,
  metaCurrentPage,
  metaItemsPerPage,
  metaTotalItems,
  setEndpoint,
  setMetaItemsPerPage,
  setPage,
  metaSearch,
  endpoint,
  search,
  setFilter,
  getFilter,
  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 OpenCustomerInvoiceTable from "@/components/displays/superuser/tables/OpenCustomerInvoiceTable.vue";
import CustomerInvoicesTable from "@/components/displays/superuser/tables/CustomerInvoicesTable.vue";
const router = useRouter();

const isInvoicePerOrder = ref(false);

const setInvoicePerOrder = (bool, autoload = false) => {
  if (bool) {
    setEndpoint('/collected-invoices/customers/invoicePerOrder', autoload)
    isInvoicePerOrder.value = true;
  } else {
    setEndpoint('/collected-invoices/customers/invoicePerMonth', autoload)
    isInvoicePerOrder.value = false;
  }
};

// Set the endpoint to the collected invoices endpoint
setInvoicePerOrder(props.invoicePerOrder, false);
setOrder("active_invoices", "desc", false);

// If the screen is mobile, set the is small variable to true
const isSmall = ref(window.innerWidth < 1024);

// When the window is resized, check if the screen is mobile
window.addEventListener('resize', () => {
  isSmall.value = window.innerWidth < 1024;
});


const showClosedInvoices = ref(false);
const setShowClosedInvoices = (value) => {
  showClosedInvoices.value = value;
  if (value) {
    setOrder("closed_invoices", "desc");
  } else {
    setOrder("active_invoices", "desc");
  }
  loadList();
};

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="!props.hideSearch"/>
  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
    <template #paginationColumns>
      <!-- Filter by status -->
      <div class="column is-narrow my-3">
        <label class="label">Faktureringsperiode</label>
        <div class="control">
          <div class="select">
            <select @change="setInvoicePerOrder($event.target.value === 'true')" v-model="isInvoicePerOrder">
              <option value="false">Faktura pr. måned</option>
              <option value="true">Faktura pr. ordre</option>
            </select>
          </div>
        </div>
      </div>
      <!-- Filter by status -->
      <div class="column is-narrow my-3">
        <label class="label">Status</label>
        <div class="control">
          <div class="select">
            <select @change="setShowClosedInvoices($event.target.value === 'true')" v-model="showClosedInvoices">
              <option value="false">Igangværende</option>
              <option value="true">Arkiv</option>
            </select>
          </div>
        </div>
      </div>
    </template>
  </PaginationDisplay>
  <CustomerInvoicesTable v-bind:objects="list" :show_closed_invoices="showClosedInvoices"/>
  <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>