<script setup lang="ts">
// type
import { genDoctor, type Doctor } from '~/models/doctor'
import type { TreatmentReportFormData } from '~/schemas/treatment-report.schema'

// components
import { toast } from '~/components/pub/ui/toast'
import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-form.vue'
import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'

const doctors = ref<Doctor[]>([])

// TODO: dummy data
;(() => {
  doctors.value = [genDoctor()]
})()
</script>

<template>
  <AppTreatmentReportEntry
    :isLoading="false"
    @submit="(val) => console.log(val)"
    @error="
      (err: Error) => {
        toast({
          title: 'Terjadi Kesalahan',
          description: err.message,
          variant: 'destructive',
        })
      }
    "
    :doctors="doctors"
    :initialValues="
      {
        operatorTeam: {
          // dpjpId: -1,
        },
        // procedures: [{ id: 5, code: 'ROC0100', name: 'Accute Appendictis' }],
      } as TreatmentReportFormData
    "
  >
    <template #procedures>
      <ArrangementProcedurePicker
        field-name="procedures"
        title="Tindakan Operatif/Non-Operatif Lain"
        sub-title="Pilih Prosedur"
      />
    </template>
  </AppTreatmentReportEntry>
</template>
