<script setup lang="ts">
import { ref } from "vue";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import InvoiceModal from "./components/invoice-modal.vue";

const PageName = "invoicePool";
const invoiceModalRef = ref<InstanceType<typeof InvoiceModal> | null>(null);

const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig)
};

const events: PageEvents = {
  content: {
    preview: ({ inv_number }) => invoiceModalRef.value.onDisplay(inv_number)
  }
};
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :events="events"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
    />
    <InvoiceModal ref="invoiceModalRef" />
  </PageAuth>
</template>
