import React__default, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { AnimatePresence, motion } from 'framer-motion';
import { I as Icon } from './Icon-es.js';
import { B as Button } from './Button-es.js';
import 'classnames';
import { T as Typography } from './Typography-es.js';

var styles = {"wrapper":"_0Tvq24WjeX8-","container":"GznHKPkdb1s-","toast":"W8zgWZqmIlk-","slice":"ol3srk7PviM-","button":"ibhpdUt9YLo-","spinning":"_5Wy5Wra20Vk-"};

function Toast({ message, variation = "success", action, actionLabel, }) {
    const [visible, setVisible] = useState(true);
    const icon = getIcon();
    let timer;
    useEffect(() => startTimer(), []);
    return (React__default.createElement(AnimatePresence, null, visible && (React__default.createElement(motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
            opacity: 0,
            scale: 0.8,
            height: 0,
            transition: { duration: 0.4 },
        } },
        React__default.createElement("div", { className: styles.slice },
            React__default.createElement(Icon, { color: icon.color, name: icon.name }),
            React__default.createElement(Typography, { element: "span", size: "large" }, message),
            action && (React__default.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
            React__default.createElement("div", { className: styles.button },
                React__default.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
    function startTimer() {
        timer = setTimeout(() => handleToastClose(), getTimeout());
    }
    function stopTimer() {
        clearTimeout(timer);
    }
    function handleToastClose() {
        if (!window)
            return;
        setVisible(false);
    }
    function getTimeout() {
        const min = 5000;
        const max = 10000;
        const time = message.length * 200;
        if (time < min)
            return min;
        if (time > max)
            return max;
        return time;
    }
    function getIcon() {
        switch (variation) {
            case "info":
                return { name: "knot", color: "lightBlue" };
            case "error":
                return { name: "alert", color: "red" };
            default:
                return { name: "checkmark", color: "green" };
        }
    }
}

const targetId = "atlantis-toast-element";
let root;
function showToast(props) {
    // Ensure target and body is still there when rendering the toast. This is due
    // to an issue with ReactDOM createRoot assuming document is always there and
    // Jest taking the document down.
    if (!globalThis.document)
        return;
    let target = globalThis.document.querySelector(`#${targetId}`);
    if (!target) {
        target = globalThis.document.createElement("div");
        target.id = targetId;
        target.classList.add(styles.wrapper);
        globalThis.document.body.appendChild(target);
    }
    if (target && !root) {
        root = createRoot(target);
    }
    if (root && target && globalThis.document.body.contains(target)) {
        root.render(React__default.createElement(ToasterOven, Object.assign({}, props)));
    }
}
const ToastContainer = forwardRef(ToastInternal);
function ToasterOven(props) {
    const toastRef = useRef(null);
    useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
    return React__default.createElement(ToastContainer, { ref: toastRef });
}
function ToastInternal(_, ref) {
    const [toastKey, setToastKey] = useState(0);
    const [toasts, setToasts] = useState([]);
    useImperativeHandle(ref, () => ({
        add: props => {
            setToastKey(toastKey + 1);
            setToasts([
                Object.assign(Object.assign({}, props), { id: toastKey }),
                ...toasts,
            ]);
        },
    }));
    return (React__default.createElement("div", { className: styles.container }, toasts.map(toast => (React__default.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
}

export { Toast as T, showToast as s };
