<script setup lang="ts">
import {HeaderComponent, SortDirection} from './sort';

interface Props {
    currentSortKey: string | null;
    sortDirection?: SortDirection | null;
    showColumn?: (k: string) => boolean;
    unsortable?: boolean;
    sortKey: string;
    headerComponent?: HeaderComponent;
}
interface Emit {
    (e: 'sort', key: string, direction: SortDirection): void;
}

withDefaults(defineProps<Props>(), {
    showColumn: () => () => true,
    unsortable: false,
    headerComponent: 'th',
});
const emit = defineEmits<Emit>();

</script>

<template>
    <component v-if="showColumn(sortKey)" :is="headerComponent" class="sort-header">
        <slot />
        <template v-if="!unsortable">
            <span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
            <span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
        </template>
    </component>
</template>

<style scoped>
@reference "@/style.css";
.sort-header {
    @apply relative h-8 pe-3;
}
span.asc, span.desc {
    @apply absolute end-1 cursor-pointer text-xs transition-opacity;
}
span.asc {
    @apply top-0.5;
}
span.desc {
    @apply bottom-0.5;
}
</style>
