<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
import { getDetail } from '~/services/control-letter.service'

// Components
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import type { ControlLetter } from '~/models/control-letter'

// #region Props & Emits
const props = withDefaults(defineProps<{ 
  encounter_id: number
  record_id: number 
  redirectToForm?: (myRecord_id?: any) => void
}>(), {
  redirectToForm: () => {},
})

// #endregion

// #region State & Computed

const router = useRouter()
const controlLetter = ref<ControlLetter | null>(null)

const headerPrep: HeaderPrep = {
  title: 'Detail Surat Kontrol',
  icon: 'i-lucide-newspaper',
}

// #endregion

// #region Lifecycle Hooks
onMounted(async () => {
  const result = await getDetail(props.record_id, {
    includes: "unit,specialist,subspecialist,doctor-employee-person",
  })
  if (result.success) {
    controlLetter.value = result.body?.data
  }
})
// #endregion

// #region Functions
function goBack() {
  router.go(-1)
}

// #endregion region

// #region Utilities & event handlers
function handleAction(type: string) {
  switch (type) {
    case 'edit':
      props.redirectToForm(props.record_id)
      break

    case 'back':
      goBack()
      break
  }
}
// #endregion

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

<template>
  <Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />

  <AppControlLetterPreview :instance="controlLetter" @click="handleAction" />
</template>
