<script setup lang="ts">
import {
    Dialog,
    DialogTrigger,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
} from '@/components/ui/dialog';
import { uploadToWarren } from '~/lib/api/warrens';

const warrenStore = useWarrenStore();
const dialog = useCreateFileDialog();

const creating = ref(false);
const fileNameValid = computed(() => dialog.value.trim().length > 0);

async function submit() {
    if (!fileNameValid.value || creating.value || warrenStore.current == null) {
        return;
    }

    creating.value = true;

    const dt = new DataTransfer();
    dt.items.add(new File([], dialog.value));

    const { success } = await uploadToWarren(
        warrenStore.current.warrenId,
        warrenStore.current.path,
        dt.files,
        undefined
    );

    creating.value = false;

    if (success) {
        dialog.reset();
    }
}

function onKeyDown(e: KeyboardEvent) {
    if (e.key === 'Enter') {
        submit();
    }
}

function onOpenChange(state: boolean) {
    if (!state) {
        dialog.reset();
    }
}
</script>

<template>
    <Dialog v-model:open="dialog.open" @update:open="onOpenChange">
        <DialogTrigger as-child>
            <slot />
        </DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>Create a file</DialogTitle>
                <DialogDescription
                    >Give your file a memorable name</DialogDescription
                >
            </DialogHeader>

            <Input
                v-model="dialog.value"
                type="text"
                name="file-name"
                placeholder="my-awesome-file"
                aria-required="true"
                autocomplete="off"
                required
                @keydown="onKeyDown"
            />

            <DialogFooter>
                <Button :disabled="!fileNameValid || creating" @click="submit"
                    >Create</Button
                >
            </DialogFooter>
        </DialogContent>
    </Dialog>
</template>
