<script setup lang="ts">
//
import { getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
import { getValueLabelList as getEmployeeValueLabelList } from '~/services/employee.service'
import { getValueLabelList as getUnitValueLabelList } from '~/services/unit.service'
import type { CheckInFormData, CheckOutFormData } from '~/schemas/encounter.schema'
import { CheckInSchema, CheckOutSchema } from '~/schemas/encounter.schema'

//
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import CheckInView from '~/components/app/encounter/check-in-view.vue'
import CheckInEntry from '~/components/app/encounter/check-in-entry.vue'
import CheckOutView from '~/components/app/encounter/check-out-view.vue'
import CheckOutEntry from '~/components/app/encounter/check-out-entry.vue'
import type { Encounter } from '~/models/encounter'
import { checkIn } from '~/services/encounter.service'

//
const props = defineProps<{
  encounter: Encounter
}>()

// doctors
const doctors = await getDoctorValueLabelList({'includes': 'employee,employee-person'})
const employees = await getEmployeeValueLabelList({'includes': 'person', 'position-code': 'reg'})
const units = await getUnitValueLabelList()

// check in
const checkInValues = ref<any>({
  discharge_method_code: '',
  responsible_doctor_id: 0,
  // registeredAt: '',
})
const checkInIsLoading = ref(false)
const checkInIsReadonly = ref(false)
const checkInDialogOpen = ref(false)

// check out
const checkOutValues = ref<any>({
  dischargeMethod_code: '',
  unit_id: 0,
  responsibleDoctor_id: 0,
})
const checkOutIsLoading = ref(false)
const checkOutIsReadonly = ref(false)
const checkOutDialogOpen = ref(false)

function editCheckIn() {
  checkInDialogOpen.value = true
}

function submitCheckIn(values: CheckInFormData) {
  checkIn(props.encounter.id, values)
}

function editCheckOut() {
  checkOutDialogOpen.value = true
}

function submitCheckOut(values: CheckOutFormData) {
  console.log(values)
}
</script>

<template>
  <div class="lg:grid grid-cols-2">
    <div class="border-r lg:pe-4 xl:pe-5 mb-10">
      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Masuk</div>
      <CheckInView
        :encounter="encounter"
        :is-loading="checkInIsLoading"
        :is-readonly="checkInIsReadonly"
        @edit="editCheckIn"
      />
    </div>
    <div class="lg:ps-4 xl:ps-5">
      <Separator class="lg:hidden my-4 xl:my-5" />
      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Keluar</div>
      <CheckOutView
        :encounter="encounter"
        :is-loading="checkOutIsLoading"
        :is-readonly="checkOutIsReadonly"
        @edit="editCheckOut"
      />
    </div>
  </div>

  <Dialog
    v-model:open="checkInDialogOpen"
    title="Ubah Informasi Masuk"
    size="md"
    prevent-outside
  >
    <CheckInEntry
      :schema="CheckInSchema"
      :values="checkInValues"
      :encounter="encounter"
      :doctors="doctors"
      :employees="employees"
      :is-loading="checkInIsLoading"
      :is-readonly="checkInIsReadonly"
      @submit="submitCheckIn"
      @cancel="checkInDialogOpen = false"
    />
  </Dialog>

  <Dialog
    v-model:open="checkOutDialogOpen"
    title="Ubah Informasi Keluar"
    size="lg"
    prevent-outside
  >
    <CheckOutEntry
      :schema="CheckOutSchema"
      :values="checkOutValues"
      :encounter="encounter"
      :units="units"
      :doctors="doctors"
      :is-loading="checkInIsLoading"
      :is-readonly="checkInIsReadonly"
      @submit="submitCheckOut"
      @cancel="checkInDialogOpen = false"
    />
  </Dialog>
</template>