import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'
import type { Encounter } from '~/models/encounter'
import { educationCodes, genderCodes } from '~/lib/constants'
import { getAge } from '~/lib/date'

type SmallDetailDto = Encounter

const action = defineAsyncComponent(() => import('./dropdown-action.vue'))
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))

export const config: Config = {
  cols: [
    {},
    {},
    {},
    { width: 160 },
    {},
    { width: 70 },
    { },
    { width: 50 },
  ],

  headers: [
    [
      { label: 'Nama' },
      { label: 'Rekam Medis' },
      { label: 'KTP' },
      { label: 'Tgl Lahir / Umur' },
      { label: 'JK' },
      { label: 'Pendidikan' },
      { label: 'Status', classVal: '!text-center' },
      { label: '' },
    ],
  ],

  keys: [
    'patient.person.name',
    'patient.number',
    'patient.person.residentIdentityNumber',
    'birth_date',
    'gender',
    'education',
    'status',
    'action',
  ],

  delKeyNames: [
    { key: 'code', label: 'Kode' },
    { key: 'name', label: 'Nama' },
  ],

  parses: {
    gender: (rec: unknown): unknown => {
      const recX = rec as Encounter
      if (recX.patient?.person?.gender_code) {
        return genderCodes[recX.patient.person.gender_code]
      }
      return '-'
    },
    education: (rec: unknown): unknown => {
      const recX = rec as SmallDetailDto
      if (recX.patient?.person?.education_code) {
        return educationCodes[recX.patient.person.education_code]
      }
      return '-'
    },
  },

  components: {
    action(rec, idx) {
      const res: RecComponent = {
        idx,
        rec: rec as object,
        component: action,
      }
      return res
    },
    status(rec, idx) {
      const recX = rec as Encounter
      if (!recX.status_code) {
        recX.status_code = 'new'
      }
      const res: RecComponent = {
        idx,
        rec: recX,
        component: statusBadge,
      }
      return res
    },
  },

  htmls: {
    birth_date: (rec: unknown): unknown => {
      const recX = rec as Encounter
      if (recX.patient?.person?.birthDate) {
        return '' +
          '<div>' + (recX.patient.person.birthDate as string).substring(0, 10) + ' / </div>' +
          getAge(recX.patient.person.birthDate as string).extFormat
      }
      return '-'
    },
  },
}