'use strict';

var React = require('react');
var client = require('react-dom/client');
var framerMotion = require('framer-motion');
var Icon = require('./Icon-cjs.js');
var Button = require('./Button-cjs.js');
require('classnames');
var Typography = require('./Typography-cjs.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] = React.useState(true);
    const icon = getIcon();
    let timer;
    React.useEffect(() => startTimer(), []);
    return (React.createElement(framerMotion.AnimatePresence, null, visible && (React.createElement(framerMotion.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.createElement("div", { className: styles.slice },
            React.createElement(Icon.Icon, { color: icon.color, name: icon.name }),
            React.createElement(Typography.Typography, { element: "span", size: "large" }, message),
            action && (React.createElement(Button.Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
            React.createElement("div", { className: styles.button },
                React.createElement(Button.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 = client.createRoot(target);
    }
    if (root && target && globalThis.document.body.contains(target)) {
        root.render(React.createElement(ToasterOven, Object.assign({}, props)));
    }
}
const ToastContainer = React.forwardRef(ToastInternal);
function ToasterOven(props) {
    const toastRef = React.useRef(null);
    React.useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
    return React.createElement(ToastContainer, { ref: toastRef });
}
function ToastInternal(_, ref) {
    const [toastKey, setToastKey] = React.useState(0);
    const [toasts, setToasts] = React.useState([]);
    React.useImperativeHandle(ref, () => ({
        add: props => {
            setToastKey(toastKey + 1);
            setToasts([
                Object.assign(Object.assign({}, props), { id: toastKey }),
                ...toasts,
            ]);
        },
    }));
    return (React.createElement("div", { className: styles.container }, toasts.map(toast => (React.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
}

exports.Toast = Toast;
exports.showToast = showToast;
