<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 { deleteWarren } from '~/lib/api/admin/deleteWarren';
import type { AdminWarrenData } from '~/shared/types/warrens';

const adminStore = useAdminStore();
// We'll only update this value if there is a warren to prevent layout shifts on close
const warren = ref<AdminWarrenData>();
const deleting = ref(false);

const confirmPath = ref<string>('');
const confirmPathInput = ref<InstanceType<typeof Input>>();

const pathMatches = computed(
    () => warren.value != null && warren.value.path === confirmPath.value
);

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

function close() {
    confirmPath.value = '';
    adminStore.closeDeleteWarrenDialog();
}

async function submit() {
    if (deleting.value || adminStore.deleteWarrenDialog == null) {
        return;
    }

    deleting.value = true;

    const { success } = await deleteWarren(
        adminStore.deleteWarrenDialog.warren.id
    );

    if (success) {
        close();
    }

    deleting.value = false;
}
</script>

<template>
    <AlertDialog :open="adminStore.deleteWarrenDialog != null">
        <AlertDialogTrigger as-child>
            <slot />
        </AlertDialogTrigger>
        <AlertDialogContent @escape-key-down="close">
            <AlertDialogHeader>
                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                <AlertDialogDescription class="space-y-1">
                    <p>
                        This action cannot be undone. This will permanently
                        delete the warren. The contained files will be left
                        unchanged.
                    </p>
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlterDialogContent v-if="warren != null">
                <div class="flex flex-col gap-4">
                    <AdminWarrenListing :warren />
                    <div class="flex flex-col gap-1">
                        <p
                            :class="[
                                'tight text-sm',
                                pathMatches
                                    ? 'text-muted-foreground'
                                    : 'text-destructive-foreground',
                            ]"
                        >
                            Enter the warren's path to continue
                        </p>
                        <Input
                            ref="confirmPathInput"
                            v-model="confirmPath"
                            type="text"
                            :placeholder="warren.path"
                            autocomplete="off"
                            data-1p-ignore
                            data-protonpass-ignore
                            data-bwignore
                        />
                    </div>
                </div>
            </AlterDialogContent>
            <AlertDialogFooter class="gap-y-0">
                <AlertDialogCancel @click="close">Cancel</AlertDialogCancel>
                <AlertDialogAction
                    :disabled="!pathMatches || deleting"
                    @click="submit"
                    >Delete</AlertDialogAction
                >
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>
</template>
