<script setup lang="ts">
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 './history-list.cfg'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import type { DateRange } from 'radix-vue'
import { cn } from '~/lib/utils'


interface Props {
  data: any[]
  paginationMeta: PaginationMeta
  dateValue: DateRange
}
const props = defineProps<Props>()
const df = new DateFormatter('en-US', {  dateStyle: 'medium',})

const emit = defineEmits<{
  pageChange: [page: number]
  'update:dateValue': [value: DateRange]
}>()

function handlePageChange(page: number) {
  emit('pageChange', page)
}
</script>

<template>
  <div class="space-y-4">
    <Popover>
            <PopoverTrigger as-child>
                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
                !props.dateValue && 'text-muted-foreground')">
                <CalendarIcon class="mr-2 h-4 w-4" />
                <template v-if="props.dateValue.start">
                    <template v-if="props.dateValue.end">
                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
                    </template>

                    <template v-else>
                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
                    </template>
                </template>
                <template v-else> Pick a date </template>
                </Button>
            </PopoverTrigger>
            <PopoverContent class="w-auto p-0">
                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
                    @update:model-value="(date) => emit('update:dateValue', date)" />
            </PopoverContent>
        </Popover>

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