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

const instance = ref(null);
const templateModalRef = ref<InstanceType<typeof TemplateModal> | null>(null)

const PageName = "publicTemplate";

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

const events: PageEvents = {
  content: {
    create: () => templateModalRef.value!.onDisplay(undefined, "create"),
    update: data => templateModalRef.value!.onDisplay(data, "update")
  }
};
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer  
      :get-content-ref="ref => (instance = ref)" 
      :events="events" 
      :hooks="hooks" 
      :content-config="contentConfig" 
      :search-config="searchConfig" 
      />
    <TemplateModal
      ref="templateModalRef" 
      @refresh="instance.onSearch()" 
     />
  </PageAuth>
</template>
