import { usePage } from '@inertiajs/react';
import { AlertCircle, CheckCircle2, X } from 'lucide-react';
import { useState } from 'react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';

type Props = {
    message?: string | null;
    error?: string | null;
};

type SharedFlash = {
    success?: string | null;
    error?: string | null;
    message?: string | null;
    validation?: string | null;
};

export function FlashBanner({ message, error }: Props) {
    const page = usePage();
    const sharedFlash = (page.props.flash ?? {}) as SharedFlash;
    const flashMessage =
        error ??
        sharedFlash.error ??
        sharedFlash.validation ??
        message ??
        sharedFlash.success ??
        sharedFlash.message;
    const isError = Boolean(
        error ?? sharedFlash.error ?? sharedFlash.validation,
    );
    const visibilityKey = [
        flashMessage ?? '',
        isError ? 'error' : 'success',
    ].join(':');
    const [dismissedKey, setDismissedKey] = useState<string | null>(null);

    if (!flashMessage || dismissedKey === visibilityKey) {
        return null;
    }

    const Icon = isError ? AlertCircle : CheckCircle2;

    return (
        <Alert
            variant={isError ? 'destructive' : 'default'}
            className="border px-4 py-3"
        >
            <Icon />
            <AlertTitle>
                {isError
                    ? 'No se pudo completar la accion'
                    : 'Operacion completada'}
            </AlertTitle>
            <AlertDescription className="pr-10">
                {flashMessage}
            </AlertDescription>
            <Button
                type="button"
                variant="ghost"
                size="icon"
                className="absolute top-2 right-2"
                onClick={() => setDismissedKey(visibilityKey)}
            >
                <X />
                <span className="sr-only">Cerrar</span>
            </Button>
        </Alert>
    );
}