import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'
import { format, parseISO } from 'date-fns'
import { id as localeID } from 'date-fns/locale'

type VisitDto = any

const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))

export const config: Config = {
  cols: [
    { width: 150 }, // TANGGAL MASUK
    { width: 180 }, // PJ BERKAS RM
    { width: 200 }, // DOKTER
    { width: 150 }, // JENIS RUANGAN
    { width: 150 }, // JENIS TINDAKAN
    { width: 180 }, // TANGGAL JADWAL TINDAKAN
    { width: 150 }, // STATUS
    { width: 120 }, // AKSI
  ],

  headers: [
    [
      { label: 'TANGGAL MASUK' },
      { label: 'PJ BERKAS RM' },
      { label: 'DOKTER' },
      { label: 'JENIS RUANGAN' },
      { label: 'JENIS TINDAKAN' },
      { label: 'TANGGAL JADWAL TINDAKAN' },
      { label: 'STATUS' },
      { label: 'AKSI' },
    ],
  ],

  keys: [
    'tanggal_masuk',
    'pj_berkas_rm',
    'dokter',
    'jenis_ruangan',
    'jenis_tindakan',
    'tanggal_jadwal_tindakan',
    'status',
    'action',
  ],

  delKeyNames: [
    { key: 'id', label: 'ID' },
    { key: 'nama', label: 'Nama' },
  ],

  parses: {
    tanggal_masuk: (rec: unknown): string => {
      const recX = rec as VisitDto
      if (!recX.tanggal_masuk) return '-'
      try {
        const date = typeof recX.tanggal_masuk === 'string' ? parseISO(recX.tanggal_masuk) : recX.tanggal_masuk
        return format(date, 'dd MMMM yyyy', { locale: localeID })
      } catch {
        return recX.tanggal_masuk.toString()
      }
    },
    tanggal_jadwal_tindakan: (rec: unknown): string => {
      const recX = rec as VisitDto
      if (!recX.tanggal_jadwal_tindakan) return '-'
      try {
        const date =
          typeof recX.tanggal_jadwal_tindakan === 'string'
            ? parseISO(recX.tanggal_jadwal_tindakan)
            : recX.tanggal_jadwal_tindakan
        return format(date, 'dd MMMM yyyy', { locale: localeID })
      } catch {
        return recX.tanggal_jadwal_tindakan.toString()
      }
    },
  },

  components: {
    status(rec, idx) {
      const res: RecComponent = {
        idx,
        rec: rec as object,
        component: statusBadge,
      }
      return res
    },
    action(rec, idx) {
      const res: RecComponent = {
        idx,
        rec: rec as object,
        component: verifyButton,
      }
      return res
    },
  },

  htmls: {},
}

