<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import { Form } from '~/components/pub/ui/form'
import SelectDate from './_common/select-date.vue'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import { FieldArray } from 'vee-validate'

import * as DE from '~/components/pub/my-ui/doc-entry'
import SelectDpjpBedah from './_common/select-dpjp-bedah.vue'
import SelectDpjpAnastesi from './_common/select-dpjp-anastesi.vue'
import SelectSurgeryType from './_common/select-surgery-type.vue'
import SelectBillingCode from './_common/select-billing-code.vue'
import SelectSurgerySystemType from './_common/select-surgery-system-type.vue'
import SelectDissectionType from './_common/select-dissection-type.vue'
import SelectSurgeryOrder from './_common/select-surgery-order.vue'
import SelectBirthDesc from './_common/select-birth-desc.vue'
import SelectBirthPlaceDesc from './_common/select-birth-place-desc.vue'
import SelectSpecimenType from './_common/select-specimen-type.vue'
import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
import RadioBloodType from './_common/radio-blood-type.vue'
import OperativeActionPicker from './operative-action/picker-dialog.vue'

const props = defineProps<{
  schema: any
  initialValues?: any
  errors?: FormErrors
  operativeActionList?: any[]
}>()

const formSchema = toTypedSchema(props.schema)
const formRef = ref()

defineExpose({
  validate: () => formRef.value?.validate(),
  resetForm: () => formRef.value?.resetForm(),
  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
  values: computed(() => formRef.value?.values),
})
</script>

<template>
  <Form
    ref="formRef"
    v-slot="{ values }"
    as=""
    keep-values
    :validation-schema="formSchema"
    :validate-on-mount="false"
    validation-mode="onSubmit"
    :initial-values="initialValues ? initialValues : {}"
  >
    <DE.Block :col-count="4" :cell-flex="false">
      <SelectDpjpBedah :errors="errors"
        field-name="a1"
        label="DPJP Bedah" placeholder="Pilih DPJP Bedah"
        is-required
      />
      <InputBase :errors="errors"
        field-name="a2"
        label="Operator" placeholder="Isi Operator"
      />
      <InputBase :errors="errors"
        field-name="a3"
        label="Asisten Operator" placeholder="Isi Asisten Operator"
      />
      <InputBase :errors="errors"
        field-name="a4"
        label="Instrumentir" placeholder="Isi Instrumentir"
      />
      <SelectDpjpAnastesi :errors="errors"
        field-name="a5"
        label="DPJP Anastesi" placeholder="Pilih DPJP Anastesi"
        is-required
      />
      <InputBase :errors="errors"
        field-name="a6"
        label="Perawatan Anastesi" placeholder="Isi Perawatan Anastesi"
      />
      <SelectDate
        field-name="a7"
        label="Tanggal Pembedahan"
        :errors="errors"
        is-required
      />
    </DE.Block>
    <DE.Block :col-count="4" :cell-flex="false">
      <DE.Cell :col-span="2">
        <TextAreaInput :errors="errors"
          field-name="a8"
          label="Diagnosa Pra Bedah" placeholder="Isi Diagnosa Pra Bedah"            
          is-required
        />
      </DE.Cell>
      <InputBase :errors="errors"
        field-name="a9"
        label="Perawat Pasca Bedah" placeholder="Isi Perawat Pasca Bedah"
      />
    </DE.Block>
    
    <!-- PICKER -->
    <DE.Block :col-count="1" :cell-flex="false" class="w-1/2">
      <OperativeActionPicker field-name="a63" title="Prosedur" />
    </DE.Block>
    <!-- -->

    <DE.Block :col-count="3" :cell-flex="false">
      <SelectSurgeryType :errors="errors"
        field-name="a10"
        label="Jenis Operasi" placeholder="Pilih Jenis Operasi"
        is-required
      />
      <SelectBillingCode :errors="errors"
        field-name="a11"
        label="Kode Billing" placeholder="Pilih Kode Billing"
        is-required
      />
      <SelectSurgerySystemType :errors="errors"
        field-name="a12"
        label="Sistem Operasi" placeholder="Pilih Sistem Operasi"
        is-required
      />      
      <SelectDate :errors="errors"
        field-name="a7"
        label="Operasi Mulai"        
        is-required
        is-with-time
      />    
      <SelectDate :errors="errors"
        field-name="a7"
        label="Operasi Selesai"        
        is-required
        is-with-time
      />
      <div>
        <p class="mt-1.5 mb-2">Lama Operasi</p>
        <h1 class="text-base"><b>{{ 1 }}</b> Jam <b>{{ 1 }}</b> Menit</h1>
      </div>
      <SelectDate :errors="errors"
        field-name="a44"
        label="Pembiusan Mulai"        
        is-required
        is-with-time
      />    
      <SelectDate :errors="errors"
        field-name="a45"
        label="Pembiusan Selesai"        
        is-required
        is-with-time
      />
      <div>
        <p class="mt-1.5 mb-2">Lama Pembiusan</p>
        <h1 class="text-base"><b>{{ 1 }}</b> Jam <b>{{ 1 }}</b> Menit</h1>
      </div>
      <SelectDissectionType :errors="errors"
        field-name="a13"
        label="Jenis Pembedahan" placeholder="Pilih Jenis Pembedahan"
        is-required
      />
      <SelectSurgeryOrder :errors="errors"
        field-name="a14"
        label="Urutan Operasi Ke" placeholder="Pilih Urutan Operasi Ke"
        is-required
      />
      <SelectBirthDesc :errors="errors"
        field-name="a15"
        label="Ket. Lahir" placeholder="Pilih Ket. Lahir"
        is-required
      />
      <SelectBirthPlaceDesc :errors="errors"
        field-name="a16"
        label="Ket. Tempat Lahir" placeholder="Pilih Ket. Tempat Lahir"
        is-required
      />
      <InputBase :errors="errors"
        field-name="a6"
        label="Berat Badan" placeholder="Isi Berat Badan"
        right-label="Gram"
        numeric-only
      />
      <InputBase :errors="errors"
        field-name="a6"
        label="Ket. Saat Lahir" placeholder="Isi Ket. Saat Lahir"
      />
      <TextAreaInput :errors="errors"
        field-name="a8"
        label="Uraian Operasi" placeholder="Isi Uraian Operasi"            
        is-required
      />
      <InputBase :errors="errors"
        field-name="a6"
        label="Jumlah Pendarahan" placeholder="Isi Jumlah Pendarahan"
        right-label="cc"
        numeric-only
      />
    </DE.Block>
    

    <DE.Block :col-count="1" :cell-flex="false" class="w-1/2">
      <RadioBloodType :errors="errors"
        field-name="a16"
        label="Jenis Darah Masuk" placeholder="Pilih Jenis Darah Masuk"
      />
      <InputBase :errors="errors"
        class=""
        field-name="a6"
        label="Jumlah Darah Masuk" placeholder="Isi Jumlah Darah Masuk"
        right-label="cc"
        numeric-only
      />
    </DE.Block>

    <DE.Block :col-count="3" :cell-flex="false">
      <InputBase :errors="errors"
        field-name="a6"
        label="Merk" placeholder="Isi Merk"
      />
      <InputBase :errors="errors"
        field-name="a6"
        label="Nama Implant" placeholder="Isi Nama Implant"
      />
      <InputBase :errors="errors"
        field-name="a6"
        label="Stiker / Nomor Register Implant" placeholder="Isi Stiker / Nomor Register Implant"
      />
      <InputBase :errors="errors"
        field-name="a6"
        label="Nama Penedamping Implant" placeholder="Isi Nama Penedamping Implant"
      />
      <SelectSpecimenType :errors="errors"
        field-name="a17"
        label="Specimen/Jaringan Dikirim Ke" placeholder="Pilih Specimen/Jaringan Dikirim Ke"
        is-required
      />
    </DE.Block>

    <DE.Block :col-count="1" :cell-flex="false" class="w-1/2">
          <FieldArray v-slot="{ fields, push, remove }" name="a32">
            <div v-for="(field, idx) in fields" :key="idx" class="flex items-end gap-3 mb-3">      
              <InputBase :errors="errors"
                :field-name="`a32[${idx}]`"
                label="Keterangan Jaringan" placeholder="Isi Keterangan Jaringan"
              />
              <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
                <Icon name="i-lucide-trash-2" class="h-4 w-4" />
              </Button>
            </div>

            <Button type="button" variant="outline"
              class="mt-3 w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
              @click="push(``)">
              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
              Tambah Keterangan Jaringan
            </Button>
          </FieldArray>
    </DE.Block>

  </Form>
</template>
