<script setup lang="ts" generic="Task extends { [key: string]: any;}">
import type { Column } from '@tanstack/vue-table'

interface DataTableColumnHeaderProps {
  column: Column<Task, any>
  title: string
}

defineProps<DataTableColumnHeaderProps>()
</script>

<script lang="ts">
export default {
  inheritAttrs: false,
}
</script>

<template>
  <div v-if="column.getCanSort()" :class="cn('flex items-center space-x-2', $attrs.class ?? '')">
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <Button
          variant="ghost"
          size="sm"
          class="-ml-3 h-8 data-[state=open]:bg-accent"
        >
          <span>{{ title }}</span>
          <Iconify v-if="column.getIsSorted() === 'desc'" icon="solar:arrow-down-line-duotone" class="w-4 h-4 ml-2" />
          <Iconify v-if="column.getIsSorted() === 'asc'" icon="solar:arrow-down-line-duotone" class="w-4 h-4 ml-2 rotate-180 " />
          <Iconify v-else icon="solar:transfer-vertical-line-duotone" class="w-4 h-4 ml-2" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem @click="column.toggleSorting(false)">
          <Iconify icon="solar:arrow-down-line-duotone" class=" rotate-180 mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
          Asc
        </DropdownMenuItem>
        <DropdownMenuItem @click="column.toggleSorting(true)">
          <Iconify icon="solar:arrow-down-line-duotone" class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
          Desc
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem @click="column.toggleVisibility(false)">
          <Iconify icon="solar:eye-closed-bold-duotone" class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
          Hide
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </div>

  <div v-else :class="$attrs.class">
    {{ title }}
  </div>
</template>
