<script setup lang="ts">
// Components
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'

// Helpers
import { usePaginatedList } from '~/composables/usePaginatedList'
import { toast } from '~/components/pub/ui/toast'
import { config } from './list.cfg'

// Types
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'

// Handlers
import {
  isReadonly,
  isProcessing,
  isFormEntryDialogOpen,
  isRecordConfirmationOpen,
  onResetState,
  handleActionSave,
  handleActionEdit,
  handleActionRemove,
  handleCancelForm,
} from '~/handlers/procedure-src.handler'

// Services
import { getList, getDetail } from '~/services/procedure-src.service'

const title = ref('')

interface Props {
  data: any[]
  paginationMeta: PaginationMeta
  processFn: (input: unknown) => void
}
const props = defineProps<Props>()

const recId = ref<string>(``)
const recAction = ref<string>(``)
const recItem = ref<any>({})
const timestamp = ref<any>({})
provide('ap_rec_id', recId)
provide('ap_rec_action', recAction)
provide('ap_rec_item', recItem)
provide('timestamp', timestamp)

const emit = defineEmits<{
  pageChange: [page: number]
  toggleDialog: []
}>()

function handlePageChange(page: number) {
  emit('pageChange', page)
}

watch([recId, recAction, ], () => {
  switch (recAction.value) {
    case ActionEvents.showProcess:
      props.processFn({
        id: recId.value,
        code: recItem.value.code,
        name: recItem.value.name,
      })
      emit('toggleDialog')
      break
  }
})
</script>

<template>
  <div class="space-y-4">
    <PubMyUiDataTable
      v-bind="config"
      :rows="data"
      :skeleton-size="paginationMeta?.pageSize"
    />
    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
  </div>
</template>
