<script setup lang="ts">
import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'

import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'

import { getDetail } from '~/services/prescription.service'
import Detail from '~/components/app/prescription/detail.vue'
import { getList as getPrescriptionItemList } from '~/services/prescription-item.service'
import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
import { type PrescriptionItem } from '~/models/prescription-item'

import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
import { create } from '~/services/prescription-item.service';

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

import {
  recItem,
} from '~/handlers/prescription-item.handler'

// props
const props = defineProps<{
  encounter_id: number
}>()

// declaration & flows
// const route = useRoute()
const { getQueryParam } = useQueryParam()
const id = getQueryParam('id')
const dataRes = await getDetail(
  typeof id === 'string' ? parseInt(id) : 0,
  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
)
const data = dataRes.body?.data || null
const items = ref(data?.items || [])

const {
  data: prescriptionItems,
  fetchData: getMyList,
} = usePaginatedList<PrescriptionItem> ({
  fetchFn: async ({ page, search }) => {
    const result = await getPrescriptionItemList({ 'prescription-id': id, search, page })
    if (result.success) {
      data.value = result.body.data
    }
    return { success: result.success || false, body: result.body || {} }
  },
  entityName: 'prescription-item',
})

const { backToList } = useQueryCRUDMode()

const headerPrep: HeaderPrep = {
  title: 'Tambah Order Obat / Resep',
  icon: 'i-lucide-box',
}

const mixDialogOpen = ref(false)
const nonMixDialogOpen = ref(false)

function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
  if (type === 'back') {
    backToList()
  }
}

function addItem(mode: 'mix' | 'non-mix') {
  if (mode === 'mix') {
    mixDialogOpen.value = true
  } else if (mode === 'non-mix') {
    nonMixDialogOpen.value = true
  }
}

function saveMix() {
  create({data})
}

function saveNonMix(data: PrescriptionItem) {
  create({data})
}
</script>

<template>
  <Header
    :prep="headerPrep"
    :ref-search-nav="headerPrep.refSearchNav"
    class="mb-4 xl:mb-5"
  />

  <Detail :data="data" />

  <ItemListEntry
    :data="prescriptionItems"
    @add="addItem"/>
  <Separator class="my-5" />

  <div class="w-full flex justify-center">
    <Nav @click="navClick" />
  </div>

  <Dialog
    v-model:open="mixDialogOpen"
    :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
    size="xl"
    prevent-outside
  >
    <MixItemEntry
      :data="data"
      :items="items"
      @close="mixDialogOpen = false"
      @save="saveMix"
    />
  </Dialog>

  <Dialog
    v-model:open="nonMixDialogOpen"
    :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
    size="xl"
    prevent-outside
  >
    <NonMixItemEntry
      :data="data"
      :items="items"
      @close="mixDialogOpen = false"
      @save="saveNonMix"
    />
  </Dialog>
</template>
