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

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

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

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

const onSubmit = form.handleSubmit(
    async (values: z.output<typeof createUserSchema>) => {
        if (creating.value) {
            return;
        }

        creating.value = true;

        const result = await createUser(values);

        creating.value = false;

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

<template>
    <Dialog :open="adminStore.createUserDialog != null">
        <DialogTrigger><slot /></DialogTrigger>
        <DialogContent @escape-key-down="cancel">
            <DialogHeader>
                <DialogTitle>Create user</DialogTitle>
                <DialogDescription>
                    Enter a username, email and password to create a new user
                </DialogDescription>
            </DialogHeader>

            <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>
                    </FormItem>
                    <FormMessage />
                </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>
                    </FormItem>
                    <FormMessage />
                </FormField>

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

            <DialogFooter>
                <Button variant="outline" @click="cancel">Cancel</Button>
                <Button type="submit" form="create-user-form">Create</Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>
</template>
