import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useState } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { alertTheme } from './Alert.theme.js';
import { reducedMotionAlertVariants, alertVariants } from './Alert.animations.js';
import { XMarkIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, BellIcon } from '@heroicons/react/24/solid';
import { Button } from '../Button/Button.js';

const defaultIcons = {
    neutral: BellIcon,
    primary: InformationCircleIcon,
    secondary: InformationCircleIcon,
    success: CheckCircleIcon,
    warning: ExclamationTriangleIcon,
    danger: XCircleIcon,
};
const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
    var _a;
    const shouldReduceMotion = useReducedMotion();
    const [isDismissing, setIsDismissing] = useState(false);
    const iconColor = (_a = alertTheme.iconColors[color]) !== null && _a !== void 0 ? _a : alertTheme.iconColors.primary;
    const showDismiss = dismissible === true || (dismissible !== false && !!onDismiss);
    const handleDismiss = () => {
        if (shouldReduceMotion) {
            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
            return;
        }
        setIsDismissing(true);
    };
    const renderIconOrAvatar = () => {
        if (avatar) {
            return (jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full", "aria-hidden": "true", children: avatar }));
        }
        if (icon === null || !showIcon) {
            return null;
        }
        if (React__default.isValidElement(icon)) {
            return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: icon }));
        }
        const IconComponent = defaultIcons[color];
        return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
    };
    const alertContent = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
                        ? jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })
                        : title), subtitle && (typeof subtitle === 'string'
                        ? jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })
                        : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
    const alertNode = (jsx(motion.div, { variants: shouldReduceMotion ? reducedMotionAlertVariants : alertVariants, initial: "hidden", animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
            if (definition === "hidden" && isDismissing) {
                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
            }
        }, children: alertContent }));
    if (darkMode) {
        return jsx("div", { className: "dark", children: alertNode });
    }
    return alertNode;
});
Alert.displayName = "Alert";

export { Alert };
