<script setup lang="ts">
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
import Modal from '~/components/pub/base/modal/modal.vue'
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
import { getMedicineMethods } from '~/services/medicine-method.service'

const data = ref([])
const entry = ref<any>({})

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

// Loading state management
const isLoading = reactive<DataTableLoader>({
  summary: false,
  isTableLoading: false,
})

const isOpen = ref(false)

const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)

const hreaderPrep: HeaderPrep = {
  title: 'Metode Pemberian',
  icon: 'i-lucide-medicine-bottle',
  addNav: {
    label: 'Tambah',
    onClick: () => (isOpen.value = true),
  },
}

async function getData() {
  try {
    isLoading.isTableLoading = true
    data.value = await getMedicineMethods()
  } catch (err) {
    console.error(err)
  } finally {
    isLoading.isTableLoading = false
  }
}

onMounted(() => {
  getData()
})

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" />
  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
    <AppMedicineMethodList :data="data" />
  </div>

  <Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
    <AppMedicineMethodEntryForm v-model="entry" />
  </Modal>
</template>
