<script setup lang="ts">
import { onMounted } from 'vue'

// Components
import AppSepEntryForm from '~/components/app/sep/entry-form.vue'
import AppViewPatient from '~/components/app/patient/view-patient.vue'
import AppViewHistory from '~/components/app/sep/view-history.vue'
import AppViewLetter from '~/components/app/sep/view-letter.vue'

// Handler
import { useIntegrationSepEntry } from '~/handlers/integration-sep-entry.handler'
import { useIntegrationSepDetail } from '~/handlers/integration-sep-detail.handler'

const {
  histories,
  letters,
  patients,
  doctors,
  diagnoses,
  facilitiesFrom,
  facilitiesTo,
  supportCodesList,
  serviceTypesList,
  registerMethodsList,
  accidentsList,
  purposeOfVisitsList,
  proceduresList,
  assessmentsList,
  provincesList,
  citiesList,
  districtsList,
  classLevelsList,
  classLevelUpgradesList,
  classPaySourcesList,
  isServiceHidden,
  isSaveLoading,
  isLetterReadonly,
  isLoadingPatient,
  openPatient,
  openLetter,
  openHistory,
  selectedLetter,
  selectedObjects,
  selectedServiceType,
  selectedAdmissionType,
  specialistsTree,
  selectedPatient,
  paginationMeta,
  getLetterMappers,
  getPatientsList,
  getPatientByIdentifierSearch,
  handleSaveLetter,
  handleSavePatient,
  handleEvent,
  handleFetch,
  handleInit,
} = useIntegrationSepEntry()

const { valueObjects, getSepDetail } = useIntegrationSepDetail()

const props = defineProps<{
  mode: 'add' | 'edit' | 'detail' | 'link'
}>()

onMounted(async () => {
  await handleInit()
  if (['detail', 'link'].includes(props.mode)) {
    await getSepDetail()
    selectedObjects.value = { ...selectedObjects.value, ...valueObjects.value }
  }
})
</script>

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
    <Icon
      name="i-lucide-panel-bottom"
      class="me-2"
    />
    <span class="font-semibold">{{ ['detail', 'link'].includes(props.mode) ? 'Detail' : 'Tambah' }} SEP</span>
  </div>
  <AppSepEntryForm
    :mode="props.mode"
    :is-save-loading="isSaveLoading"
    :is-service="isServiceHidden"
    :is-readonly="['detail', 'link'].includes(props.mode)"
    :doctors="doctors"
    :diagnoses="diagnoses"
    :facilities-from="facilitiesFrom"
    :facilities-to="facilitiesTo"
    :service-types="serviceTypesList"
    :register-methods="registerMethodsList"
    :accidents="accidentsList"
    :purposes="purposeOfVisitsList"
    :procedures="proceduresList"
    :assessments="assessmentsList"
    :support-codes="supportCodesList"
    :provinces="provincesList"
    :cities="citiesList"
    :districts="districtsList"
    :class-levels="classLevelsList"
    :class-level-upgrades="classLevelUpgradesList"
    :class-pay-sources="classPaySourcesList"
    :specialists="specialistsTree"
    :objects="selectedObjects"
    @fetch="handleFetch"
    @event="handleEvent"
  />
  <AppViewPatient
    v-model:open="openPatient"
    v-model:selected="selectedPatient"
    :patients="patients"
    :pagination-meta="paginationMeta"
    @fetch="
      (value) => {
        if (value.search && value.search.length >= 3) {
          // Use identifier search for specific searches (NIK, RM, etc.)
          getPatientByIdentifierSearch(value.search)
        } else {
          // Use regular search for general searches
          getPatientsList({ ...value, 'page-size': 10, includes: 'person' })
        }
      }
    "
    @save="handleSavePatient"
  />
  <AppViewHistory
    v-model:open="openHistory"
    :histories="histories"
  />
  <AppViewLetter
    v-model:open="openLetter"
    :letters="letters"
    :menu="selectedAdmissionType !== '3' ? 'control' : 'reference'"
    :selected="selectedLetter"
    :pagination-meta="{ recordCount: 0, page: 1, pageSize: 10, totalPage: 0 } as any"
    @fetch="(value) => getLetterMappers(value.admissionType, value.search)"
    @save="handleSaveLetter"
  />
</template>
