<script setup lang="ts">
import {
    ContextMenu,
    ContextMenuTrigger,
    ContextMenuContent,
    ContextMenuItem,
} from '@/components/ui/context-menu';
import { deleteWarrenEntry } from '~/lib/api/warrens';
import type { FileType } from '~/types';

const route = useRoute();
const warrenRoute = useWarrenRoute();

const { name, fileType, disabled } = defineProps<{
    name: string;
    fileType: FileType;
    disabled: boolean;
}>();

const iconName = computed(() =>
    fileType === 'file' ? 'lucide:file' : 'lucide:folder'
);
const deleting = ref(false);

async function submitDelete() {
    deleting.value = true;

    await deleteWarrenEntry(warrenRoute.value, name, fileType);

    deleting.value = false;
}
</script>

<template>
    <ContextMenu>
        <ContextMenuTrigger>
            <NuxtLink
                :to="joinPaths(route.path, name)"
                :class="['select-none', { 'pointer-events-none': disabled }]"
            >
                <Button
                    class="w-44 h-12"
                    variant="outline"
                    size="lg"
                    :disabled="disabled"
                >
                    <Icon :name="iconName" />
                    <span class="truncate">{{ name }}</span>
                </Button>
            </NuxtLink>
        </ContextMenuTrigger>
        <ContextMenuContent>
            <ContextMenuItem @select="submitDelete">
                <Icon name="lucide:trash-2" />
                Delete
            </ContextMenuItem>
        </ContextMenuContent>
    </ContextMenu>
</template>
