<script setup lang="ts">
import * as DE from '~/components/pub/my-ui/doc-entry'
import { genderCodes } from '~/const/key-val/person';
import type { Encounter } from '~/models/encounter'

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

const addressText = computed(() => {
  if (props.data.patient.person.addresses && props.data.patient.person.addresses.length > 0) {
    return props.data.patient.person.addresses.map((a) => a.address).join(', ')
  }
  return '-'
})

const paymentMethodText = computed(() => {
  const code = props.data.paymentMethod_code
  if (!code) return '-'

  // Map payment method codes
  if (code === 'insurance') {
    return 'JKN'
  } else if (code === 'jkn') {
    return 'JKN'
  } else if (code === 'jkmm') {
    return 'JKMM'
  } else if (code === 'spm') {
    return 'SPM'
  } else if (code === 'pks') {
    return 'PKS'
  }
})

let dpjpText = ref('')
if (props.data.responsible_doctor) {
  const dp = props.data.responsible_doctor.employee.person
  dpjpText.value = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
} else if (props.data.appointment_doctor) {
  dpjpText.value = props.data.appointment_doctor.employee.person.name
}
</script>

<template>
  <div class="w-full py-3 2xl:py-4 px-5">
    <!-- Data Pasien -->
    <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">
      {{ data.patient.person.name }} - {{ data.patient.number }}
    </h2>
    <div class="grid grid-cols-3">
      <div>
        <DE.Block mode="preview" class="!mb-0">
          <DE.Cell>
            <DE.Label class="font-semibold">Tgl. Lahir</DE.Label>
            <DE.Colon />
            <DE.Field>
              {{ data.patient.person.birthDate?.substring(0, 10) }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label class="font-semibold"><span class="hidden xl:inline">Jns.</span> Kelamin</DE.Label>
            <DE.Colon />
            <DE.Field>
              {{ genderCodes[data.patient.person.gender_code as keyof typeof genderCodes] }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label class="font-semibold">Alamat</DE.Label>
            <DE.Colon />
            <DE.Field>
              {{ addressText }}
            </DE.Field>
          </DE.Cell>
        </DE.Block>
      </div>
      <div>
        <DE.Block mode="preview" class="!mb-0">
          <DE.Cell>
            <DE.Label position="dynamic" class="font-semibold">Tgl. Masuk</DE.Label>
            <DE.Colon />
            <DE.Field>
              {{ data.visitDate.substring(0, 10) }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label position="dynamic" class="font-semibold">Poliklinik</DE.Label>
            <DE.Colon />
            <DE.Field>
              {{ data.unit?.name }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label position="dynamic" class="font-semibold">Diagnosa</DE.Label>
            <DE.Colon />
            <DE.Field>
              {{ data.unit?.name }}
            </DE.Field>
          </DE.Cell>
        </DE.Block>
      </div>
      <div>
        <DE.Block mode="preview" class="!mb-0">
          <DE.Cell>
            <DE.Label position="dynamic" class="font-semibold">DPJP</DE.Label>
            <DE.Colon />
            <DE.Field>
              {{ dpjpText }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label position="dynamic" class="font-semibold">Pembayaran</DE.Label>
            <DE.Colon />
            <DE.Field>
              {{ paymentMethodText }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label position="dynamic" class="!text-base !font-semibold 2xl:!text-lg">
              Billing
            </DE.Label>
            <DE.Colon class="pt-1"/>
            <DE.Field class="text-base 2xl:text-lg">
              Rp. 000.000
              <!-- {{ data }} -->
            </DE.Field>
          </DE.Cell>
        </DE.Block>
      </div>
    </div>
  </div>
</template>
