<script setup lang="ts">
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import ListEntry from '~/components/app/prescription/list-entry.vue'
import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.vue'

import { getList } from '~/services/prescription.service'
import { usePaginatedList } from '~/composables/usePaginatedList'

import MixEntry from '~/components/app/prescription-item/mix-entry.vue'

const {
  data,
  isLoading,
  paginationMeta,
  searchInput,
  handlePageChange,
  handleSearch,
  fetchData: getMedicineList,
} = usePaginatedList({
  fetchFn: async ({ page, search }) => {
    const result = await getList({ search, page })
    return { success: result.success || false, body: result.body || {} }
  },
  entityName: 'medicine',
})


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

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

const headerPrep: HeaderPrep = {
  title: 'Resep Obat',
  icon: 'i-lucide-panel-bottom',
  addNav: {
    label: 'Tambah',
    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
  },
}

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)

let loading = ref(false);
let itemEntryDialogShown = ref(false);
let itemMixEntryDialogShown = ref(false);
let title = '';

onMounted(() => {
  getMaterialList()
})

async function getMaterialList() {
  isLoading.dataListLoading = true

  // const resp = await xfetch('/api/v1/material')
  // if (resp.success) {
  //   data.value = (resp.body as Record<string, any>).data
  // }

  isLoading.dataListLoading = false
}

function addMedicine() {
  itemEntryDialogShown.value = true;
}

function addMedicineMix() {
  itemMixEntryDialogShown.value = true;
}

</script>

<template>
  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
  <ListEntry v-if="!isLoading.dataListLoading" :data="[]" :isLoading="isLoading.isTableLoading" :paginatin="{}" />

  <Dialog v-model:open="itemEntryDialogShown" :title="!!recItem ? title : 'Tambah Obat'" size="lg" prevent-outside>
  </Dialog>

  <Dialog v-model:open="itemMixEntryDialogShown" :title="!!recItem ? title : 'Tambah Obat'" size="lg" prevent-outside>
    <MixEntry />
  </Dialog>  

</template>
