<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { ExposedForm } from '~/types/form'
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
import { handleActionSave,} from '~/handlers/supporting-document.handler'
import { toast } from '~/components/pub/ui/toast'
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
import { toFormData } from '~/lib/utils'
import { uploadAttachment } from '~/services/supporting-document.service'

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

})

// form related state
const inputForm = ref<ExposedForm<any> | null>(null)
const { user } = useUserStore()
// #endregion

// #region State & Computed
const router = useRouter()
const isConfirmationOpen = ref(false)
const initialValues = {
  officer: user.user_name,
}
// #endregion

// #region Lifecycle Hooks
// #endregion

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


async function handleConfirmAdd() {
  const inputData = await composeFormData()
  const inputFormData: FormData = toFormData(inputData)

  const response = await handleActionSave(inputFormData, () => { }, () => { }, toast, )
  // const data = (response?.body?.data ?? null)
  goBack()
}

async function composeFormData(): Promise<any> {
  inputForm.value?.setValues({
    ...inputForm.value?.values,
    ref_id: props.encounter_id,
    upload_employee_id: user.employee_id
  })

  const [inputFormState,] = await Promise.all([
    inputForm.value?.validate(),
  ])

  const results = [inputFormState]
  const allValid = results.every((r) => r?.valid)

  // exit, if form errors happend during validation
  if (!allValid) {
    toast({ title: 'Form validation failed', variant: 'destructive',})
    return Promise.reject('Form validation failed')
  }
  const formData = inputFormState?.values
  return new Promise((resolve) => resolve(formData))
}
// #endregion region

// #region Utilities & event handlers
async function handleActionClick(eventType: string) {
  if (eventType === 'submit') {
    isConfirmationOpen.value = true
  }

  if (eventType === 'back') goBack()
}

function handleCancelAdd() {
  isConfirmationOpen.value = false
}
// #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">
    <h1>Upload Dokumen</h1>
  </div>
  <AppDocumentUploadEntryForm
    ref="inputForm"
    :schema="DocumentUploadSchema"
    :initial-values="initialValues"
  />

  <div class="mb-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>
