<script setup lang="ts">
import { withBase } from '~/models/_base'
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
import type { PatientEntity } from '~/models/patient'
import type { Person } from '~/models/person'

// Components
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'

import { getPatientDetail } from '~/services/patient.service'

// #region Props & Emits
const props = defineProps<{
  patientId: number
}>()

// #endregion

// #region State & Computed
const isDocPreviewDialogOpen = ref<boolean>(false)
const docPreviewUrl = ref<string>('')

const patient = ref(
  withBase<PatientEntity>({
    person: {} as Person,
    personAddresses: [],
    personContacts: [],
    personRelatives: [],
  }),
)

const headerPrep: HeaderPrep = {
  title: 'Detail Pasien',
  icon: 'i-lucide-user',
}

// #endregion

// #region Lifecycle Hooks
onMounted(async () => {
  // await getPatientDetail()
  const result = await getPatientDetail(props.patientId)
  if (result.success) {
    patient.value = result.body.data || {}
  }
})
// #endregion

// #region Functions
// #endregion region

// #region Utilities & event handlers
async function onBack() {
  await navigateTo({
    name: 'client-patient',
  })
}
async function onEdit() {
  await navigateTo({
    name: 'client-patient-id-edit',
    params: {
      id: props.patientId,
    },
  })
}
// #endregion

// #region Watchers
// #endregion
</script>

<template>
  <div
    v-if="patient"
    :key="patient.id"
  >
    <Header
      :prep="headerPrep"
      :ref-search-nav="headerPrep.refSearchNav"
    />

    <AppPatientPreview
      :patient="patient"
      @back="onBack"
      @edit="onEdit"
      @preview="
        (url: string) => {
          docPreviewUrl = url
          isDocPreviewDialogOpen = true
        }
      "
    />
    <Dialog
      v-model:open="isDocPreviewDialogOpen"
      title="Preview Dokumen"
      size="2xl"
    >
      <DocPreviewDialog :link="docPreviewUrl" />
    </Dialog>
  </div>
</template>
