import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { useRef, useCallback, useEffect, useMemo } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { toastTheme } from './Toast.theme.js';
import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
import { ArrowPathIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
import { Button } from '../Button/Button.js';

const isToastAction = (action) => typeof action === "object" &&
    action !== null &&
    "label" in action &&
    "onClick" in action;
const Toast = React__default.forwardRef(({ toast, className, onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouseLeave, onHeightChange, expandedOffset, darkMode = false, ...props }, ref) => {
    var _a;
    const internalRef = useRef(null);
    const setRefs = useCallback((node) => {
        internalRef.current = node;
        if (typeof ref === "function") {
            ref(node);
        }
        else if (ref) {
            ref.current = node;
        }
    }, [ref]);
    const shouldReduceMotion = useReducedMotion();
    const { id, variant = "default", state = "default", title, subtitle, icon, action, children, duration = 5000, dismissible = true, } = toast;
    const isTextOnly = !subtitle && !action && !children;
    const defaultIcon = state === "loading" ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) })) : (jsx(InformationCircleIcon, { className: "w-5 h-5" }));
    const resolvedIcon = icon || defaultIcon;
    // Auto-dismiss after duration
    useEffect(() => {
        if (duration > 0 && dismissible) {
            const timer = setTimeout(() => {
                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
            }, duration);
            return () => clearTimeout(timer);
        }
    }, [duration, dismissible, id, onDismiss]);
    // Report measured height to parent
    useEffect(() => {
        if (internalRef.current && onHeightChange) {
            const height = internalRef.current.offsetHeight;
            onHeightChange(id, height);
        }
    }, [id, onHeightChange, title, subtitle]);
    const handleDismiss = () => {
        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
    };
    const handleActionClick = () => {
        if (isToastAction(action)) {
            action.onClick();
            if (dismissible) {
                handleDismiss();
            }
        }
    };
    const stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded, expandedOffset);
    const animateValue = useMemo(() => {
        var _a, _b, _c, _d;
        return ({
            opacity: (_a = stackingStyle.opacity) !== null && _a !== void 0 ? _a : 1,
            y: (_b = stackingStyle.y) !== null && _b !== void 0 ? _b : 0,
            scale: (_c = stackingStyle.scale) !== null && _c !== void 0 ? _c : 1,
            zIndex: (_d = stackingStyle.zIndex) !== null && _d !== void 0 ? _d : 1,
        });
    }, [
        stackingStyle.opacity,
        stackingStyle.y,
        stackingStyle.scale,
        stackingStyle.zIndex,
    ]);
    const styleValue = useMemo(() => {
        var _a;
        return ({
            zIndex: (_a = stackingStyle.zIndex) !== null && _a !== void 0 ? _a : 1,
            position: (index > 0
                ? "absolute"
                : "relative"),
            top: index > 0 ? 0 : undefined,
            left: index > 0 ? 0 : undefined,
            width: index > 0 ? "100%" : undefined,
        });
    }, [stackingStyle.zIndex, index]);
    const toastNode = (jsxs(motion.div, { ref: setRefs, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
            ? { ...toastAnimations.exit, transition: { duration: 0 } }
            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && "items-center", ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title &&
                        (typeof title === "string" ? (jsx("div", { className: cn(toastTheme.titleStyle, !isTextOnly && "font-semibold"), children: title })) : (title)), subtitle &&
                        (typeof subtitle === "string" ? (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })) : (subtitle)), action && (jsx("div", { className: "mt-4", children: isToastAction(action) ? (jsx(Button, { variant: "link", color: "primary", onClick: handleActionClick, children: action.label })) : (action) })), children] }), dismissible && (jsx("button", { type: "button", className: cn(toastTheme.closeButtonStyle, !isTextOnly && "mt-0.5"), onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
    if (darkMode) {
        return jsx("div", { className: "dark", children: toastNode });
    }
    return toastNode;
});
Toast.displayName = "Toast";

export { Toast };
