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

import Modal from "./modal.vue"

const PageName = "supplierBrand";
const instance = ref<any>(null);

const brand = reactive({
  visible: false,
  type: 'create',
  id: ''
})

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

const events: PageEvents = {
  content: {
    create(){
      brand.id = ''
      brand.type = 'create'
      brand.visible = true
    },
    update(row){
      brand.id = row.id
      brand.type = 'update'
      brand.visible = true
    },
    preview(row){
      brand.id = row.id
      brand.type = 'preview'
      brand.visible = true
    }
  }
};
</script>

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

    <Modal 
      v-model:visible="brand.visible"
      :type="brand.type"
      :id="brand.id"
      @refresh="instance?.onSearch()"
      />
  </PageAuth>
</template>
