<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 { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'

const props = defineProps<{
  prep: HeaderPrep
  refSearchNav?: RefSearchNav
  enableExport?: boolean
  refExportNav?: RefExportNav
}>()

// function emitSearchNavClick() {
//   props.refSearchNav?.onClick()
// }
//
// function onInput(event: Event) {
//   props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
// }
//
// function btnClick() {
//   props.prep?.addNav?.onClick?.()
// }

const searchQuery = ref('')
const dateRange = ref<{ from: Date | null; to: Date | null }>({
  from: new Date(),
  to: new Date(),
})

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

const value = ref({
  start: new CalendarDate(2022, 1, 20),
  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
}) as Ref<DateRange>

function onFilterClick() {
  console.log('Search:', searchQuery.value)
  console.log('Date Range:', dateRange.value)
  props.refSearchNav?.onClick()
}
</script>

<template>
  <header>
    <div class="flex items-center gap-2 mb-4 2xl:mb-5">
      
      <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">
        <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 v-show="props.refExportNav?.onExportPdf"
                            @click="props.refExportNav?.onExportPdf">
                            Ekspor PDF
          </DropdownMenuItem>
          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
                            @click="props.refExportNav?.onExportCsv">
                            Ekspor CSV
          </DropdownMenuItem>
          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
                            @click="props.refExportNav?.onExportExcel">
                            Ekspor Excel
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      
    </div>
  </header>
</template>
