<script setup lang="ts">
// helpers
import { format, parseISO } from 'date-fns'
import { id as localeID } from 'date-fns/locale'
// components
import { Button } from '~/components/pub/ui/button'
import Calendar from '~/components/pub/ui/calendar/Calendar.vue'
import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'

const props = defineProps<{
  placeholder?: string
  modelValue?: Date | string | undefined
}>()

const emit = defineEmits<{
  'update:modelValue': [value: Date | string | undefined]
}>()

const date = ref<Date | any>(undefined)

watch(date, (value) => {
  const newValue = format(value, 'yyyy-MM-dd', { locale: localeID })
  emit('update:modelValue', newValue)
})

onMounted(() => {
  if (props.modelValue) {
    const value = props.modelValue
    if (value instanceof Date) {
      date.value = value
    } else if (typeof value === 'string' && value) {
      date.value = parseISO(value)
    } else {
      date.value = undefined
    }
  }
})
</script>

<template>
  <div class="flex flex-col space-y-2">
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" class="bg-white border-gray-400 font-normal text-right w-full h-8 2xl:h-9">
          <div class="flex justify-between items-center w-full">
            <p v-if="date">{{ format(date, 'PPP', { locale: localeID }) }}</p>
            <p v-else class="text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
            <Icon name="i-lucide-calendar"/>
          </div>
        </Button>
      </PopoverTrigger>
      <PopoverContent class="w-auto p-0">
        <Calendar v-model="date" mode="single" locale="id" />
      </PopoverContent>
    </Popover>
  </div>
</template>
