import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useContext, useEffect } from 'react';
import { createPortal } from 'react-dom';
import Icon from '../Icon/Icon.js';
import Button from '../Button/Button.js';
import classNames from '../../_virtual/index.js';
import Typography from '../Typography/Typography.js';
import { ThemeContext } from '../ThemeProvider/ThemeProvider.js';

const Toaster = ({ isOpen = false, variant = 'success', toastTitle = 'Success', onCancelClick = () => { }, onConfirmation = () => { }, toastMessage = 'Hello this is child element', displayDuration = 5000, confirmationText = 'Confirm', zIndex = 1300, }) => {
    const [isExiting, setIsExiting] = useState(false);
    const iconMap = {
        success: 'success',
        info: 'toast_info',
        warning: 'warning',
        danger: 'error',
        confirm: 'delete',
        alert: 'alert',
    };
    const getToasterIcon = (variant) => {
        const name = iconMap[variant];
        return jsx(Icon, { name: name, height: 40, width: 40 });
    };
    const themeContext = useContext(ThemeContext);
    const currentTheme = themeContext?.currentTheme;
    useEffect(() => {
        if (isOpen && variant !== 'confirm') {
            const timer = setTimeout(() => {
                setIsExiting(true);
                setTimeout(onCancelClick, 500); // Duration of exit animation
            }, displayDuration);
            return () => {
                clearTimeout(timer);
                setIsExiting(false);
            };
        }
        return () => { };
    }, [isOpen]);
    const handleClose = () => {
        setIsExiting(true);
        setTimeout(() => {
            onCancelClick();
            setIsExiting(false);
        }, 500);
    };
    if (!isOpen && !isExiting)
        return null;
    return createPortal(jsx("div", { role: "alert", "aria-live": "assertive", className: classNames('ff-toaster-overlay', {
            exiting: isExiting,
            [currentTheme || '']: true,
        }), style: { zIndex }, children: jsx("div", { className: classNames('ff-toaster', { exiting: isExiting }), children: jsxs("div", { className: `ff-toaster-container ff-toaster--${variant}`, children: [getToasterIcon(variant), jsxs("div", { className: "ff-toaster-content", children: [jsx(Typography, { color: 'var(--tooltip-bg-color)', fontWeight: "semi-bold", lineHeight: "18px", className: "ff-toaster-content__title", children: toastTitle }), jsx(Typography, { color: 'var(--input-default-label-color)', fontWeight: "semi-bold", fontSize: '10px', className: "ff-toaster-content__message", children: toastMessage }), variant === 'confirm' && (jsxs("div", { className: "ff-toaster-content__prompt", children: [jsx(Button, { onClick: handleClose, variant: "secondary", children: "Cancel" }), jsx(Button, { onClick: onConfirmation, variant: "delete", children: confirmationText })] }))] }), jsx("div", { className: "ff-close-icon-wrapper", onClick: handleClose, children: jsx(Icon, { name: "close" }) })] }) }) }), document.body);
};

export { Toaster as default };
//# sourceMappingURL=Toast.js.map
