<script setup lang="ts">
import ProcedureListDialog from './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'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import List from './list.vue'
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import { getList, getDetail } from '~/services/procedure-src.service'
import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/my-ui/data/types'

interface Props {
  fieldName: string
  title: string
}
const props = defineProps<Props>()
const isOperativeActionDialogOpen = ref(false)
provide("isOperativeActionDialogOpen", isOperativeActionDialogOpen);

const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
  entityName: 'surgery-report',
})
const headerPrep: HeaderPrep = {
  title: props.title,
  icon: 'i-lucide-clipboard-list',
}
const refSearchNav: RefSearchNav = {
  onClick: () => {
    // open filter modal
  },
  onInput: (val: string) => {
    searchInput.value = val
  },
  onClear: () => {
    searchInput.value = ''
  },
}

const handleToggleOperativeActionDialog = () => {
  isOperativeActionDialogOpen.value = !isOperativeActionDialogOpen.value
}

const dummy = [
  {
    id: 1,
    number: 1,
    name: 'Operasi',
    code: 'OP-001'
  }
]
</script>

<template>
  <div class="">
    <div class="mb-2 flex justify-between">
      <h1 class="mb-2 font-medium">{{ title }}</h1>
      <Button @click="isOperativeActionDialogOpen = 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 {{ title }}
      </Button>
    </div>

    <FieldArray v-slot="{ fields, push, remove }" :name="props.fieldName">
      <Dialog
        v-model:open="isOperativeActionDialogOpen"
        title="" size="xl">
        <Header
              :prep="headerPrep"
              :ref-search-nav="refSearchNav"
              v-model:search="searchInput"
              @search="handleSearch" />
        <!-- <List :data="dummy" :process-fn="push" /> -->
        <List
          :data="dummy"
          :pagination-meta="paginationMeta"
          @page-change="handlePageChange"
          @toggle-dialog="handleToggleOperativeActionDialog"
          :process-fn="push"
        />
      </Dialog>

      <div class="border border-gray-200 rounded-lg overflow-hidden">
        <Table>
          <TableHeader class="bg-gray-100">
            <TableRow>
              <TableHead class="">Prosedur</TableHead>
              <TableHead class="">Code</TableHead>
              <TableHead class="w-24">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>
