<script setup lang="ts">
import { z } from 'zod'
import Entry from '~/components/app/soapi/entry.vue'
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import { EarlyRehabSchema } from '~/schemas/soapi.schema'
import { toast } from '~/components/pub/ui/toast'
import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'

const isOpen = ref(false)
const data = ref([])
const schema = EarlyRehabSchema
const model = ref({
  'prim-compl': '',
  'medical-plan': '',
  'diagnosis-medical': '',
  'rehab-trouble': '',
  'medical-trouble': '',
  'physic-modal': '',
  exercise: '',
  'ortho-pesa': '',
  education: '',
  other: '',
  cranialis: '',
  sensoris: '',
  'reflect-fisio': '',
  'reflect-pato': '',
  otonom: '',
  localis: '',
  'medical-trial': '',
  therapy: '',
  'syst-bp': '',
  'diast-bp': '',
  pulse: '',
  gcs: '',
  'respiratory-rate': '',
  temperature: '',
  ambulance: '',
  gait: '',
  'neck-rom': '',
  'body-rom': '',
  'aga-rom': '',
  'agb-rom': '',
  'neck-mmt': '',
  'body-mmt': '',
  'aga-mmt': '',
  'agb-mmt': '',
  localis: '',
  'medical-trouble': '',
  'rehab-trouble': '',
  temp: '',
  spo2: '',
  weight: '',
  height: '',
})

const isLoading = reactive<DataTableLoader>({
  isTableLoading: false,
})

async function getPatientList() {
  isLoading.isTableLoading = true
  const resp = await xfetch('/api/v1/patient')
  if (resp.success) {
    data.value = (resp.body as Record<string, any>).data
  }
  isLoading.isTableLoading = false
}

onMounted(() => {
  getPatientList()
})

function handleOpen(type: string) {
  console.log(type)
  isOpen.value = true
}

const entryRehabRef = ref()
async function actionHandler(type: string) {
  console.log(type)
  const result = await entryRehabRef.value?.validate()
  if (result?.valid) {
    console.log('✅ Valid data:', result.data)
    handleActionSave(result.data, {}, toast)
  } else {
    console.log('❌ Ada error di form', result)
  }
}

provide('table_data_loader', isLoading)
</script>
<template>
  <Entry
    ref="entryRehabRef"
    v-model="model"
    :schema="schema"
    type="early-rehab"
    @modal="handleOpen"
  />
  <div class="my-2 flex justify-end py-2">
    <Action @click="actionHandler" />
  </div>
  <Dialog
    v-model:open="isOpen"
    title="Pilih Prosedur"
    size="xl"
    prevent-outside
  >
    <AppIcdMultiselectPicker :data="data" />
  </Dialog>
</template>
