"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, isValidElement } from "react";
import { useScaleTransition } from "../transition/useScaleTransition.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { ToastActionButton } from "./ToastActionButton.js";
import { ToastCloseButton } from "./ToastCloseButton.js";
import { ToastContent } from "./ToastContent.js";
import { toast } from "./toastStyles.js";
/**
 * **Client Component**
 *
 * This component is just used for toast styling and does not implement any of
 * the visibility behavior.
 *
 * @since 6.0.0
 */ export const Toast = /*#__PURE__*/ forwardRef(function Toast(props, ref) {
    const { id: propId, className, timeout, classNames, theme = "surface", action: propAction, actionButton: propActionButton, paused, visible, closeIcon: propCloseIcon, closeButtonProps, closeButton = !!closeButtonProps, contentProps, disableToastContent, stacked, multiline, onEnter, onEntering, onEntered, onExit, onExiting, onExited, children, ...remaining } = props;
    const id = useEnsuredId(propId, "toast");
    let actionButton = propActionButton;
    if (propAction) {
        let overrides = {};
        let buttonChildren;
        // have to use `any` to correctly filter out all react elements
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        if (/*#__PURE__*/ isValidElement(propAction) || typeof propAction !== "object") {
            buttonChildren = propAction;
        } else {
            ({ children: buttonChildren, ...overrides } = propAction);
        }
        actionButton = /*#__PURE__*/ _jsx(ToastActionButton, {
            theme: theme === "surface" ? "secondary" : "clear",
            reordered: stacked && closeButton,
            ...overrides,
            children: buttonChildren
        });
    }
    let closeIcon = propCloseIcon;
    if (typeof closeButtonProps?.children !== "undefined") {
        closeIcon = closeButtonProps.children;
    }
    const action = !!actionButton;
    const reordered = stacked && action && closeButton;
    const { elementProps, rendered } = useScaleTransition({
        appear: true,
        nodeRef: ref,
        className: toast({
            className,
            theme,
            action,
            paused,
            stacked,
            reordered,
            closeButton
        }),
        timeout,
        classNames,
        onEnter,
        onEntering,
        onEntered,
        onExit,
        onExiting,
        onExited,
        temporary: true,
        transitionIn: visible,
        exitedHidden: true
    });
    // this might get rid of the weird popping-back-in for a split second
    // that sometimes happens on mobile firefox
    if (!rendered) {
        return null;
    }
    return /*#__PURE__*/ _jsxs("div", {
        ...remaining,
        ...elementProps,
        id: id,
        children: [
            /*#__PURE__*/ _jsx(ToastContent, {
                action: action,
                stacked: stacked,
                multiline: multiline,
                closeButton: closeButton,
                disableWrapper: disableToastContent,
                ...contentProps,
                children: children
            }),
            actionButton,
            closeButton && /*#__PURE__*/ _jsx(ToastCloseButton, {
                reordered: reordered,
                ...closeButtonProps,
                children: closeIcon
            })
        ]
    });
});

//# sourceMappingURL=Toast.js.map