import {
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '@/Components/ui/alert-dialog';
import { Button } from '@/Components/ui/button';
import { Reminder } from '@/types';
import { useForm } from '@inertiajs/react';
import { AlertDialog, AlertDialogTrigger } from '@radix-ui/react-alert-dialog';
import { Loader2, Trash2 } from 'lucide-react';
import { FormEventHandler } from 'react';

export default function ReminderDeleteAction({
    reminder,
}: {
    reminder: Reminder;
}) {
    const handleDeleteButtonClick: FormEventHandler = (e) => {
        e.stopPropagation();
    };

    const handleCancelButtonClick: FormEventHandler = (e) => {
        e.stopPropagation();
    };

    const { processing, reset, delete: destroy } = useForm();

    const deleteReminder: FormEventHandler = (e) => {
        e.preventDefault();

        destroy(route('reminders.destroy', { reminder: reminder.id }), {
            preserveScroll: true,
            onFinish: () => reset(),
        });
    };

    return (
        <AlertDialog>
            <AlertDialogTrigger onClick={handleDeleteButtonClick}>
                <Button variant="ghost" className="h-8 w-8 p-0">
                    <Trash2 />
                </Button>
            </AlertDialogTrigger>

            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Confermi?</AlertDialogTitle>
                    <AlertDialogDescription className="text-zinc-500">
                        Stai per eliminare questo promemoria e, una volta fatto,
                        non potrai tornare indietro.
                    </AlertDialogDescription>
                </AlertDialogHeader>

                <AlertDialogFooter>
                    <AlertDialogCancel
                        onClick={handleCancelButtonClick}
                        disabled={processing}
                    >
                        Annulla
                    </AlertDialogCancel>
                    <AlertDialogAction
                        onClick={deleteReminder}
                        disabled={processing}
                    >
                        {processing ? (
                            <Loader2 className="animate-spin" />
                        ) : null}
                        Continua
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
}