<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { Patient, genPatientProps } from '~/models/patient'
import type { ExposedForm } from '~/types/form'
import type { PatientBase } from '~/models/patient'
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
import { genPatient } from '~/models/patient'
import { PatientSchema } from '~/schemas/patient.schema'
import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
import { PersonAddressSchema } from '~/schemas/person-address.schema'
import { PersonContactListSchema } from '~/schemas/person-contact.schema'
import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
import { uploadAttachment } from '~/services/patient.service'
import { getDetail, update } from '~/services/control-letter.service'

import {
  // for form entry
  isReadonly,
  isProcessing,
  isFormEntryDialogOpen,
  isRecordConfirmationOpen,
  onResetState,
  handleActionSave,
  handleCancelForm,
} from '~/handlers/patient.handler'

import { toast } from '~/components/pub/ui/toast'
import { getPatientDetail } from '~/services/patient.service'
import { withBase } from '~/models/_base'
import type { Person } from '~/models/person'
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'

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

// form related state
const personPatientForm = ref<ExposedForm<any> | null>(null)

// #endregion

// #region State & Computed
const router = useRouter()
const isConfirmationOpen = ref(false)
const patient = ref(
  withBase<Patient>({
    person: {} as Person,
    personAddresses: [],
    personContacts: [],
    personRelatives: [],
  }),
)
// #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
function goBack() {
  router.go(-1)
}

async function handleConfirmAdd() {
  // handleActionClick('submit')
  console.log(`tersubmit wak`)
}

function handleCancelAdd() {
  isConfirmationOpen.value = false
}
// #endregion region

// #region Utilities & event handlers
async function handleActionClick(eventType: string) {
  if (eventType === 'submit') {
    isConfirmationOpen.value = true
    // const patient: Patient = await composeFormData()
    // let createdPatientId = 0

    // const response = await handleActionSave(
    //   patient,
    //   () => {},
    //   () => {},
    //   toast,
    // )

    // const data = (response?.body?.data ?? null) as PatientBase | null
    // if (!data) return
    // createdPatientId = data.id

    // // If has callback provided redirect to callback with patientData
    // if (props.callbackUrl) {
    //   await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
    //   return
    // }

    // // Navigate to patient list or show success message
    // await navigateTo('/outpatient/encounter')
    // return
  }

  if (eventType === 'cancel') {
    if (props.callbackUrl) {
      await navigateTo(props.callbackUrl)
      return
    }

    goBack()
    // handleCancelForm()
  }
}
// #endregion

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

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Surat Kontrol</div>
  <AppOutpatientEncounterEntryForm
    ref="personPatientForm"
    :schema="PatientSchema"
  />
  
  <div class="my-2 flex justify-end py-2">
    <Action :enable-draft="false" @click="handleActionClick" />
  </div>

  <Confirmation
    v-model:open="isConfirmationOpen"
    title="Simpan Data"
    message="Apakah Anda yakin ingin menyimpan data ini?"
    confirm-text="Simpan"
    @confirm="handleConfirmAdd"
    @cancel="handleCancelAdd"
  />
</template>

<style scoped>
/* component style */
</style>
