<script lang="ts" setup>
//
import { LucideCheck } from 'lucide-vue-next';
import { useForm, useFieldArray } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'

//
import type z from 'zod'
import * as CB from '~/components/pub/my-ui/combobox'
import { dischargeMethodCodes } from '~/lib/constants';
import type {
  CheckOutFormData,
  CheckOutDeathFormData,
  CheckOutInternalReferenceFormData
} from '~/schemas/encounter.schema'

import * as Table from '~/components/pub/ui/table'
import * as DE from '~/components/pub/my-ui/doc-entry'
import type { InternalReference, CreateDto as InternalReferenceCreateDto } from '~/models/internal-reference';

interface Props {
  schema: z.ZodSchema<any>
  values: any
  units: any[]
  doctors: any[]
  isLoading?: boolean
  isReadonly?: boolean
}
const props = defineProps<Props>()

const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)

const emit = defineEmits<{
  submit: [values: CheckOutFormData]
  cancel: [resetForm: () => void]
}>()

const { defineField, errors, meta } = useForm({
  validationSchema: toTypedSchema(props.schema),
  initialValues: {
    discharge_method_code: '',
    discharge_date: '',
    internalReferences: [{ unit_id: 0, doctor_id: 0 }],
    deathCauses: [""],
  } as Partial<CheckOutFormData>,
})
const [ discharge_method_code, discharge_method_codeAttrs ] = defineField('discharge_method_code')
const [ discharge_date, discharge_dateAttrs ] = defineField('discharge_date') 
const { fields, push, remove } = useFieldArray<InternalReferenceCreateDto>('internalReferences');

function submitForm(values: any) {
  if (['consul-poly', 'consul-executive'].includes(discharge_method_code.value)) {
    const formData: CheckOutInternalReferenceFormData = {
      discharge_method_code: discharge_method_code.value,
      discharge_date: discharge_date.value,
      internalReferences: [{ unit_id: 0, doctor_id: 0 }],
    }
    emit('submit', formData)
  } else if (discharge_method_code.value === 'death') {
    const formData: CheckOutDeathFormData = {
      discharge_method_code: discharge_method_code.value,
      discharge_date: discharge_date.value,
      death_cause: [""],
    }
    emit('submit', formData)
  } else {
    const formData: CheckOutFormData = {
      discharge_method_code: discharge_method_code.value,
      discharge_date: discharge_date.value,
    }
    emit('submit', formData)
  }
}

const resetForm = () => {
  discharge_method_code.value = ''
  discharge_date.value = ''
}
</script>

<template>
  <DE.Block :cellFlex="false">
    <DE.Cell>
      <DE.Label>Alasan Keluar</DE.Label>
      <DE.Field>
        <CB.Combobox
          id="dischargeMethodItems"
          v-model="discharge_method_code"
          v-bind="discharge_method_codeAttrs"
          :items="dischargeMethodItems"
          :disabled="isLoading || isReadonly"
          placeholder="Pilih Cara Keluar"
          search-placeholder="Cari Cara Keluar"
          empty-message="Cara Keluar tidak ditemukan"
        />
      </DE.Field>
    </DE.Cell>

    <DE.Cell>
      <DE.Label>Waktu Keluar</DE.Label>
      <DE.Cell>
        <Input
          id="discharge_date"
          v-model="discharge_date"
          v-bind="discharge_dateAttrs"
          :disabled="isLoading || isReadonly"
        />
      </DE.Cell>
    </DE.Cell>

    <DE.Cell v-if="'death' == discharge_method_code">
      <DE.Label>Sebab Meninggal</DE.Label>
      <DE.Cell>
        <div class="mb-3">
          <Input />
        </div>
        <div>
          <Button
            v-if="!isReadonly"
              type="button"
              :disabled="isLoading || !meta.valid"
              @click="submitForm"
          >
            Tambah Sebab meninggal
          </Button>
        </div>
      </DE.Cell>
    </DE.Cell>

    <DE.Cell v-if="['consul-poly', 'consul-executive'].includes(discharge_method_code)">
      <DE.Label>Tujuan</DE.Label>
      <DE.Field>
        <Table.Table class="border mb-3">
          <Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
            <Table.TableCell class="text-center">Poly</Table.TableCell>
            <Table.TableCell class="text-center">DPJP</Table.TableCell>
            <Table.TableCell class="text-center !w-10"></Table.TableCell>
          </Table.TableHeader>
          <Table.TableBody>
            <Table.TableRow v-for="(item, index) in fields" :key="index">
              <Table.TableCell class="!p-0.5">
                <CB.Combobox
                  id="dischargeMethodItems"
                  :v-model.number="item.value.unit_id"
                  :items="units"
                  :disabled="isLoading || isReadonly"
                  placeholder="Pilih Poly"
                  search-placeholder="Cari Poly"
                  empty-message="Poly tidak ditemukan"
                />
              </Table.TableCell>
              <Table.TableCell class="!p-0.5">
                <CB.Combobox
                  id="dischargeMethodItems"
                  :v-model.number="item.value.doctor_id"
                  :items="units"
                  :disabled="isLoading || isReadonly"
                  placeholder="Pilih Dokter"
                  search-placeholder="Pilih Dokter"
                  empty-message="Dokter tidak ditemukan"
                />
              </Table.TableCell>
              <Table.TableCell>
                <Button variant="destructive" size="xs" @click="remove(index)" class="w-6 h-6 rounded-full">
                  X
                </Button>
              </Table.TableCell>
            </Table.TableRow>
          </Table.TableBody>
        </Table.Table>
        <div>
          <Button @click="push({ encounter_id: 0, unit_id: 0, doctor_id: 0 })">Tambah</Button>
        </div>
      </DE.Field>
    </DE.Cell>
  </DE.Block>
  <div class="text-center">
    <Button @click="submitForm">>
      <LucideCheck />
      Simpan
    </Button>
  </div>
</template>

<style>

</style>