<script setup lang="ts">
import {
    ContextMenu,
    ContextMenuTrigger,
    ContextMenuContent,
    ContextMenuItem,
} from '@/components/ui/context-menu';

const warrenStore = useWarrenStore();
const copyStore = useCopyStore();
const createDirectoryDialog = useCreateDirectoryDialog();
const createFileDialog = useCreateFileDialog();

const pasting = ref<boolean>(false);
const validPaste = computed(
    () =>
        !pasting.value && copyStore.file != null && warrenStore.current != null
);

const props = defineProps<{
    class?: string;
}>();

async function onPaste() {
    if (!validPaste.value) {
        return;
    }

    pasting.value = true;

    const success = await pasteFile(copyStore.file!, {
        warrenId: warrenStore.current!.warrenId,
        name: copyStore.file!.name,
        path: warrenStore.current!.path,
    });

    if (success) {
        copyStore.clearFile();
    }

    pasting.value = false;
}
</script>

<template>
    <ContextMenu>
        <ContextMenuTrigger :class="props.class">
            <slot />
        </ContextMenuTrigger>
        <ContextMenuContent>
            <ContextMenuItem :disabled="!validPaste" @select="onPaste">
                <Icon name="lucide:clipboard-paste" />
                Paste
            </ContextMenuItem>
            <ContextMenuItem @select="createFileDialog.openDialog">
                <Icon name="lucide:file-plus" />
                Create file
            </ContextMenuItem>
            <ContextMenuItem @select="createDirectoryDialog.openDialog">
                <Icon name="lucide:folder-plus" />
                Create directory
            </ContextMenuItem>
        </ContextMenuContent>
    </ContextMenu>
</template>
