<script setup lang="ts">
import DiagnosisListDialog from './diagnosis-list.vue'
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import { Form } from '~/components/pub/ui/form'
import { FieldArray } from 'vee-validate'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import * as DE from '~/components/pub/my-ui/doc-entry'
import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
import { cn } from '~/lib/utils'
import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
import { is } from 'date-fns/locale'

interface Props {
  fieldName: string
  title: string
}
const props = defineProps<Props>()

const isMedicalDiagnosisPickerDialogOpen = ref<boolean>(false)
provide(`isMedicalDiagnosisPickerDialogOpen`, isMedicalDiagnosisPickerDialogOpen)
</script>

<template>
  <div class="">
    <div class="mb-2 flex items-center justify-between">
      <h1 class="mb-2 font-medium">{{ title }}</h1>
      <Button @click="isMedicalDiagnosisPickerDialogOpen = true" size="xs" variant="outline"
        class="text-orange-400 border-orange-400 bg-transparent">
        <Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
        Pilih Diagnosis
      </Button>
    </div>

    <FieldArray v-slot="{ fields, push, remove }" :name="fieldName">
      <DiagnosisListDialog :process-fn="push" />

      <div class="border border-gray-200 rounded-lg overflow-hidden">
        <Table>
          <TableHeader class="bg-gray-100">
            <TableRow>
              <TableHead class="w-1/2">Diagnosis</TableHead>
              <TableHead class="w-1/2">ICD-X</TableHead>
              <TableHead class="w-1/2">Action</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="(field, idx) in fields" :key="idx">
              <TableCell class="">{{ field.value?.name }}</TableCell>
              <TableCell class="">{{ field.value?.code }}</TableCell>
              <TableCell class="">
                <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
                  <Icon name="i-lucide-trash-2" class="h-4 w-4" />
                </Button>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
      
    </FieldArray>
  </div>
</template>
