<script setup lang="ts">
import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
import List from '~/components/app/soapi/list.vue'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'

const props = defineProps<{
  label: string
}>()

const { goToEntry } = useQueryCRUDMode('mode')
const router = useRouter()
const route = useRoute()

const data = ref([])

const refSearchNav: RefSearchNav = {
  onClick: () => {
    // open filter modal
  },
  onInput: (_val: string) => {
    // filter patient list
  },
  onClear: () => {
    // clear url param
  },
}

// Loading state management
const isLoading = reactive<DataTableLoader>({
  isTableLoading: false,
})
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)

const hreaderPrep: HeaderPrep = {
  title: props.label,
  icon: 'i-lucide-users',
  addNav: {
    label: 'Tambah',
    onClick: () => goToEntry(),
  },
}

async function getPatientList() {
  const resp = await xfetch(`/api/v1/soapi?encounter_id=${route.params.id}?include=encounter`)
  if (resp.success) {
    data.value = (resp.body as Record<string, any>).data
  }
}

const goEdit = (id: string) => {
  router.replace({
    path: route.path,
    query: {
      ...route.query,
      mode: 'entry',
      'record-id': id,
    },
  })
}

onMounted(() => {
  getPatientList()
})

watch(recId, () => {
  console.log('recId', recId.value)
  console.log('recIdaacin', recAction.value)
  if (recAction.value === 'showEdit') {
    goEdit(recId.value)
  }
})

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
</script>

<template>
  <Header
    :prep="{ ...hreaderPrep }"
    :ref-search-nav="refSearchNav"
  />

  <List :data="data" />
</template>
