<script setup>
import {
  isLoaded,
  isLoading,
  list,
  loadList,
  metaCurrentPage,
  metaItemsPerPage,
  metaTotalItems,
  setEndpoint,
  setMetaItemsPerPage,
  setPage,
  setFilter,
  getFilter,
} from "@/components/pagination/paginatedList.vue";
// Create a new pagination component for the vehicles, to allow multiple pagination components on the same page
import {SessionUser} from "@/components/session/token/SessionUser.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 VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue";
import {defineProps, ref} from "vue";

const props = defineProps({
  customer_id: {
    type: Number,
    required: false,
    default: null,
  },
  add_other_customer_id: {
    type: Number,
    required: false,
    default: null,
  },
})
setEndpoint("/vehicles", false);
if (props.customer_id) {
  setFilter("customer_id", props.customer_id, false);
}
loadList();
</script>

<template>
  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
  </PaginationDisplay>
  <VehiclesTable :vehicles="list" :show_add_vehicle="props.customer_id" :add_other_customer_id="props.add_other_customer_id"/>
  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
  <LoadButtonWhileAwait class="is-dark" :isLoading="!isLoaded()" :loadFunction="loadList" icon="fas fa-sync-alt">Opdater</LoadButtonWhileAwait>
</template>

<style scoped>

</style>