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

// Components
import Header from '~/components/pub/my-ui/nav-header/prep.vue'

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

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

// #endregion

// #region State & Computed
const patient = ref(
  withBase<Patient>({
    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
function handleAction(type: string) {
  switch (type) {
    case 'edit':
      // TODO: Handle edit action
      console.log('editing data')
      break

    case 'cancel':
      navigateTo({
        name: 'client-patient',
      })
      break
  }
}
// #endregion

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

<template>
  <Header
    :prep="headerPrep"
    :ref-search-nav="headerPrep.refSearchNav"
    class="mb-4 border-b-2 border-b-slate-300 pb-2 xl:mb-5"
  />
  <AppPatientPreview
    :patient="patient"
    @click="handleAction"
  />
</template>
