<script setup lang="ts">
import { Input } from '@/components/ui/input';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import type { AuthUser } from '~/types/auth';

const adminStore = useAdminStore();
// We'll only update this value if there is a user to prevent layout shifts on close
const user = ref<AuthUser>();
const confirmEmailInput = ref<InstanceType<typeof Input>>();
const confirmEmail = ref<string>('');

const emailMatches = computed(
    () => user.value != null && user.value.email === confirmEmail.value
);

adminStore.$subscribe(async (_mutation, state) => {
    if (state.deleteUserDialog != null) {
        user.value = state.deleteUserDialog.user;
        setTimeout(() => confirmEmailInput.value?.domRef?.focus(), 25);
    }
});

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

function submit() {}
</script>

<template>
    <AlertDialog :open="adminStore.deleteUserDialog != null">
        <AlertDialogTrigger as-child>
            <slot />
        </AlertDialogTrigger>
        <AlertDialogContent @escape-key-down="cancel">
            <AlertDialogHeader>
                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                <AlertDialogDescription class="space-y-1">
                    <p ref="test">
                        This action cannot be undone. This will permanently
                        delete the user and remove their data from the database
                    </p>
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlterDialogContent v-if="user != null">
                <div class="flex flex-col gap-4">
                    <AdminUserListing :user />
                    <div class="flex flex-col gap-1">
                        <p
                            :class="[
                                'tight text-sm',
                                emailMatches
                                    ? 'text-muted-foreground'
                                    : 'text-destructive-foreground',
                            ]"
                        >
                            Enter their email address to continue
                        </p>
                        <Input
                            ref="confirmEmailInput"
                            v-model="confirmEmail"
                            type="text"
                            :placeholder="user.email"
                            autocomplete="off"
                            data-1p-ignore
                            data-protonpass-ignore
                            data-bwignore
                        />
                    </div>
                </div>
            </AlterDialogContent>
            <AlertDialogFooter>
                <AlertDialogCancel @click="cancel">Cancel</AlertDialogCancel>
                <AlertDialogAction :disabled="!emailMatches" @click="submit"
                    >Delete</AlertDialogAction
                >
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>
</template>
