<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/yup';
import { useForm } from 'vee-validate';
import { createWarren } from '~/lib/api/admin/createWarren';
import { createWarrenSchema } from '~/lib/schemas/admin';

const adminStore = useAdminStore();
const creating = ref(false);

function close() {
    adminStore.closeCreateWarrenDialog();
    form.resetForm();
}

const form = useForm({
    validationSchema: toTypedSchema(createWarrenSchema),
});

const onSubmit = form.handleSubmit(async (values) => {
    if (creating.value) {
        return;
    }

    creating.value = true;

    const result = await createWarren(values.name, values.path);

    creating.value = false;

    if (result.success) {
        close();
    }
});
</script>
<template>
    <AlertDialog :open="adminStore.createWarrenDialogOpen">
        <AlertDialogTrigger><slot /></AlertDialogTrigger>
        <AlertDialogContent @escape-key-down="close">
            <AlertDialogHeader>
                <AlertDialogTitle>Create warren</AlertDialogTitle>
                <AlertDialogDescription>
                    Enter a name and an absolute file path to create a new
                    warren
                </AlertDialogDescription>
            </AlertDialogHeader>

            <form
                id="create-warren-form"
                class="flex flex-col gap-2"
                @submit.prevent="onSubmit"
            >
                <FormField v-slot="{ componentField }" name="name">
                    <FormItem>
                        <FormLabel>Name</FormLabel>
                        <FormControl>
                            <Input
                                v-bind="componentField"
                                id="name"
                                type="text"
                                placeholder="my-warren"
                                autocomplete="off"
                                data-1p-ignore
                                data-protonpass-ignore
                                data-bwignore
                            />
                        </FormControl>
                        <FormMessage />
                    </FormItem>
                </FormField>

                <FormField v-slot="{ componentField }" name="path">
                    <FormItem>
                        <FormLabel>File path</FormLabel>
                        <FormControl>
                            <Input
                                v-bind="componentField"
                                id="path"
                                type="text"
                                placeholder="/mywarren"
                                autocomplete="off"
                                data-1p-ignore
                                data-protonpass-ignore
                                data-bwignore
                            />
                        </FormControl>
                        <FormMessage />
                    </FormItem>
                </FormField>
            </form>

            <AlertDialogFooter class="gap-y-0">
                <AlertDialogCancel variant="outline" @click="close">
                    Cancel
                </AlertDialogCancel>
                <AlertDialogAction
                    type="submit"
                    form="create-warren-form"
                    :disabled="creating"
                    >Create</AlertDialogAction
                >
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>
</template>
