<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
import { Input } from '~/components/pub/ui/input'
import { cn } from '~/lib/utils'

import * as DE from '~/components/pub/my-ui/doc-entry'
import { CalendarDate, DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date'

const props = defineProps<{
  dateValueStart?: DateValue | undefined
  dateValueEnd?: DateValue | undefined
}>()

const {
  dateValueStart = new CalendarDate(2022, 1, 20),
  dateValueEnd = new CalendarDate(2022, 1, 20).add({ days: 20 }),
} = props

// Reactive variables for age calculation
const patientAge = ref<string>('Masukkan tanggal lahir')

const df = new DateFormatter('en-US', {
  dateStyle: 'medium',
})
</script>

<template>
  <Popover>
        <PopoverTrigger as-child>
          <Button variant="outline" :class="cn('w-[280px] justify-start text-left font-normal',
            (!dateValueStart && !dateValueEnd) && 'text-muted-foreground')">
            <CalendarIcon class="mr-2 h-4 w-4" />
            <template v-if="dateValueStart">
              <template v-if="dateValueEnd">
                {{ df.format(dateValueStart.toDate(getLocalTimeZone())) }} -
                {{ df.format(dateValueEnd.toDate(getLocalTimeZone())) }}
              </template>
  
              <template v-else>
                {{ df.format(dateValueStart.toDate(getLocalTimeZone())) }}
              </template>
            </template>
            <template v-else> Pick a date </template>
          </Button>
        </PopoverTrigger>
        <PopoverContent class="w-auto p-0">
          <RangeCalendar v-model="dateValue" initial-focus :number-of-months="2"
            @update:start-value="(startDate) => (dateValueStart = startDate)" />
        </PopoverContent>
      </Popover>
</template>
