import type { Config } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'

type SmallDetailDto = any

export const rowType = {
  1: 'Patient',
  2: 'Encounter',
  3: 'Observation',
}

export const rowStatus = {
  0: 'Gagal',
  1: 'Pending',
  2: 'Terkirim',
}

const patientBadge = defineAsyncComponent(() => import('./badge-patient.vue'))
const statusBadge = defineAsyncComponent(() => import('./badge-status.vue'))

export const config: Config = {
  cols: [
    { width: 100 },
    { width: 100 },
    { width: 100 },
    { width: 100 },
    { width: 100 },
    { width: 100 },
  ],

  headers: [
    [
      { label: 'ID' },
      { label: 'Jenis' },
      { label: 'Pasien' },
      { label: 'Status' },
      { label: 'Terakhir Update' },
      { label: 'FHIR ID' },
    ],
  ],

  keys: ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id'],

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

  parses: {
    name: (rec: unknown): unknown => {
      const recX = rec as SmallDetailDto
      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
    },
  },

  components: {
    patient(rec, idx) {
      return {
        idx,
        rec: rec as object,
        component: patientBadge,
      }
    },
    status(rec, idx) {
      return {
        idx,
        rec: rec as object,
        component: statusBadge,
      }
    },
  },

  htmls: {
    patient_address(_rec) {
      return '-'
    },
  },
}
