<script setup lang="ts">
import { Switch } from '@/components/ui/switch';
import { useForm } from 'vee-validate';
import { createUserSchema } from '~/lib/schemas/admin';
import { createUser } from '~/lib/api/admin/createUser';
import { toTypedSchema } from '@vee-validate/yup';

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

function cancel() {
    adminStore.closeCreateUserDialog();
    form.resetForm();
}

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

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

    creating.value = true;

    const result = await createUser(values);

    creating.value = false;

    if (result.success) {
        adminStore.closeCreateUserDialog();
    }
});
</script>

<template>
    <AlertDialog :open="adminStore.createUserDialogOpen">
        <AlertDialogTrigger><slot /></AlertDialogTrigger>
        <AlertDialogContent @escape-key-down="cancel">
            <AlertDialogHeader>
                <AlertDialogTitle>Create user</AlertDialogTitle>
                <AlertDialogDescription>
                    Enter a username, email and password to create a new user
                </AlertDialogDescription>
            </AlertDialogHeader>

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

                <FormField v-slot="{ componentField }" name="email">
                    <FormItem>
                        <FormLabel>Email</FormLabel>
                        <FormControl>
                            <Input
                                v-bind="componentField"
                                id="email"
                                type="email"
                                placeholder="confusedcat@example.com"
                                autocomplete="off"
                                data-1p-ignore
                                data-protonpass-ignore
                                data-bwignore
                            />
                        </FormControl>
                        <FormMessage />
                    </FormItem>
                </FormField>

                <FormField v-slot="{ componentField }" name="password">
                    <FormItem>
                        <FormLabel>Password</FormLabel>
                        <FormControl>
                            <Input
                                v-bind="componentField"
                                id="password"
                                type="password"
                                autocomplete="off"
                                data-1p-ignore
                                data-protonpass-ignore
                                data-bwignore
                            />
                        </FormControl>
                        <FormMessage />
                    </FormItem>
                </FormField>

                <FormField v-slot="{ value, handleChange }" name="admin">
                    <FormItem>
                        <FormLabel>Admin</FormLabel>
                        <FormControl>
                            <Switch
                                id="admin"
                                :model-value="value"
                                @update:model-value="handleChange"
                            />
                        </FormControl>
                        <FormMessage />
                    </FormItem>
                </FormField>
            </form>

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