<script setup lang="ts">
import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
import { ref } from 'vue'
import type { Ref } from 'vue'
import type { DateRange } from 'radix-vue'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import { cn } from '~/lib/utils'
import type { RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'

const props = defineProps<{
  activePositon?: string
  refSearchNav?: RefSearchNav
  enableExport?: boolean
  refExportNav?: RefExportNav
  onFilterClick?: () => void
  onExportPdf?: () => void
  onExportExcel?: () => void
  onExportCsv?: () => void
}>()

const emit = defineEmits<{
  apply: [filters: { personName: string; startDate: string; endDate: string }]
}>()

const searchQuery = ref('')
const isRoleRegistration = props.activePositon === 'registration'
const isRoleMedical = props.activePositon === 'medical'

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

// Get current date
const today = new Date()
const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())

// Get date 1 month ago
const oneMonthAgo = new Date(today)
oneMonthAgo.setMonth(today.getMonth() - 1)
const oneMonthAgoCalendar = new CalendarDate(
  oneMonthAgo.getFullYear(),
  oneMonthAgo.getMonth() + 1,
  oneMonthAgo.getDate(),
)

const value = ref({
  start: oneMonthAgoCalendar,
  end: todayCalendar,
}) as Ref<DateRange>

function onFilterClick() {
  const startDate = value.value.start ? value.value.start.toString() : ''
  const endDate = value.value.end ? value.value.end.toString() : startDate

  emit('apply', {
    personName: searchQuery.value,
    startDate,
    endDate,
  })
}
</script>

<template>
  <div class="relative w-64">
    <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
    <Input
      v-model="searchQuery"
      type="text"
      placeholder="Cari Nama /No.RM"
      class="pl-9"
    />
  </div>

  <Popover>
    <PopoverTrigger as-child>
      <Button
        variant="outline"
        :class="
          cn('min-w-[240px] max-w-[320px] justify-start text-left font-normal', !value && 'text-muted-foreground')
        "
      >
        <CalendarIcon class="mr-2 h-4 w-4" />
        <template v-if="value.start">
          <template v-if="value.end">
            {{ df.format(value.start.toDate(getLocalTimeZone())) }} -
            {{ df.format(value.end.toDate(getLocalTimeZone())) }}
          </template>

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

  <Button
    variant="outline"
    class="border-orange-500 text-orange-600 hover:bg-orange-50"
    @click="onFilterClick"
  >
    <FilterIcon class="mr-2 size-4" />
    Filter
  </Button>

  <DropdownMenu v-show="props.enableExport && (isRoleRegistration || isRoleMedical)">
    <DropdownMenuTrigger as-child>
      <Button
        variant="outline"
        class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50"
      >
        <Icon
          name="i-lucide-download"
          class="h-4 w-4"
        />
        Ekspor
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem @click="onExportPdf">Ekspor PDF</DropdownMenuItem>
      <DropdownMenuItem @click="onExportCsv">Ekspor CSV</DropdownMenuItem>
      <DropdownMenuItem @click="onExportExcel">Ekspor Excel</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>
