import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogMedia,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Spinner } from "../ui/spinner";
import * as Icons from "lucide-react"
import { useState } from "react";

interface ConfirmActionAlertButtonProps {
    title: string;
    description: string;

    icon: keyof typeof Icons;
    iconClassName?: string;
    addIcon?: boolean;
    buttonIcon?: keyof typeof Icons;

    confirmText?: string;
    cancelText?: string;

    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
    alertVariant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null

    onConfirm: () => Promise<void> | void;

    loading?: boolean;

    className?: string;
}

export function ConfirmActionAlertButton({
    title,
    description,
    icon,
    iconClassName,
    addIcon,
    buttonIcon = 'Plus',
    confirmText = "Confirm",
    cancelText = "Cancel",
    variant = "default",
    alertVariant = "default",
    onConfirm,
    loading,
    className,
}: ConfirmActionAlertButtonProps) {
    const [processing, setProcessing] = useState(false);

    const handleConfirm = async () => {
        setProcessing(true);

        try {
            await onConfirm();
        } finally {
            setProcessing(false);
        }
    };

    const LucideIconButton = Icons[buttonIcon] as Icons.LucideIcon
    const LucideIcon = Icons[icon] as Icons.LucideIcon

    return (
        <AlertDialog>
            <AlertDialogTrigger asChild>
                <Button
                    size='sm'
                    disabled={processing}
                    variant={variant}
                    className={cn("gap-2 rounded-sm", className)}
                >
                    {loading ? <Spinner /> : addIcon && <LucideIconButton className="w-4 h-4" />}

                    {confirmText}
                </Button>
            </AlertDialogTrigger>

            <AlertDialogContent size="sm">
                <AlertDialogHeader>
                    <AlertDialogMedia className={cn("text-primary bg-primary/10 dark:bg-primary/20", iconClassName)}   >
                        <LucideIcon />
                    </AlertDialogMedia>

                    <AlertDialogTitle>{title}</AlertDialogTitle>

                    <AlertDialogDescription>
                        {description}
                    </AlertDialogDescription>
                </AlertDialogHeader>

                <AlertDialogFooter>
                    <AlertDialogCancel disabled={processing}>
                        {cancelText}
                    </AlertDialogCancel>

                    <AlertDialogAction
                        type="button"
                        onClick={handleConfirm}
                        disabled={processing}
                        variant={alertVariant}
                    >
                        {processing ? <Spinner /> : confirmText}
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
}