<script setup lang="ts">
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
import { config } from './national-program-list.cfg'
import { cn } from '~/lib/utils'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import type { DateRange } from 'radix-vue'
import { CalendarIcon } from 'lucide-vue-next'
import type { Item } from '~/components/pub/my-ui/combobox'
import Select from '~/components/pub/my-ui/form/select.vue'
import * as DE from '~/components/pub/my-ui/doc-entry'

interface Props {
  data: any[]
  paginationMeta: PaginationMeta
  searchValue: string
  statusValue: string
}
const props = defineProps<Props>()
const isModalOpen = inject(`isNationalProgramServiceHistoryOpen`) as Ref<boolean>

const emit = defineEmits<{
  pageChange: [page: number]
  'update:searchValue': [value: string]
  'update:statusValue': [value: string]
}>()

function handlePageChange(page: number) {
  emit('pageChange', page)
}

const statusOptions: Item[] = [
  { value: 'all', label: 'All Statuses' },
  { value: 'pending', label: 'Pending' },
  { value: 'active', label: 'Active' },
  { value: 'completed', label: 'Completed' },
  { value: 'archived', label: 'Archived' },
]
</script>

<template>
  <Dialog v-model:open="isModalOpen" title="" size="2xl">
    <div class="space-y-4">
        <DE.Block :col-count="4" class="" :cell-flex="false"> 
          <Input
            v-model="props.searchValue"
            class=""
            placeholder="Cari .."/>
          <Select
            :items="statusOptions"
            :model-value="props.statusValue" 
            @update:model-value="(data) => emit('update:statusValue', data)"
          />
        </DE.Block>

        <PubMyUiDataTable
            v-bind="config"
            :rows="data"
            :skeleton-size="props.paginationMeta?.pageSize"
        />
        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
    </div>
  </Dialog>
</template>