import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Button, Icon, IconButton, Text, useClipboard, } from "@chakra-ui/react";
import React from "react";
import iconsList from "./components/iconsList";
export const EditorToastNotificationContext = React.createContext({
    notification: null,
    closeNotification: () => { },
    /* eslint-disable @typescript-eslint/no-unused-vars -- for createContext type inference */
    triggerNotification: (messages, timeout) => { },
    /* eslint-enable */
});
export const EditorToastNotificationContextProvider = React.memo(function EditorToastNotificationContextProvider(props) {
    const [notification, setNotification] = React.useState(null);
    const timeoutRef = React.useRef(null);
    const closeNotification = React.useCallback(() => setNotification(null), []);
    const triggerNotification = React.useCallback((message, timeout = 5000) => {
        clearTimeout(timeoutRef.current);
        setNotification(message);
        timeoutRef.current = setTimeout(() => setNotification(null), timeout);
    }, []);
    const contextValue = React.useMemo(() => ({
        notification,
        closeNotification,
        triggerNotification,
    }), [notification, closeNotification, triggerNotification]);
    return (_jsx(EditorToastNotificationContext.Provider, Object.assign({ value: contextValue }, { children: props.children })));
});
const CustomToastMessage = ({ type, tracingID, onClose, }) => {
    const { hasCopied, onCopy } = useClipboard(tracingID, 60000);
    React.useEffect(() => {
        if (onClose && hasCopied) {
            setTimeout(() => {
                onClose();
            }, 2000);
        }
    }, [hasCopied]);
    return (_jsxs(Box, Object.assign({ color: "white", bg: type === "success" ? "green" : "#E03138", borderRadius: "4px", padding: "12px 16px", display: "flex", alignItems: "center", justifyContent: "space-between" }, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Icon, { as: iconsList[type === "success" ? "CheckCircle" : "XCircle"], mr: "12px", fontSize: "16px" }), _jsx(Text, Object.assign({ mr: "12px", color: "white" }, { children: type === "success"
                            ? "Successfully running pipeline"
                            : "Failed to run pipeline" })), !!tracingID && (_jsx(Button, Object.assign({ colorScheme: type === "success" ? "green" : "#E03138", color: "white", variant: "link", mr: "12px", onClick: onCopy }, { children: hasCopied ? "Copied!" : "Copy trace ID" })))] })), _jsx(IconButton, { "aria-label": "close pipeline message", colorScheme: type === "success" ? "green" : "#E03138", icon: _jsx(Icon, { as: iconsList["Close"] }), color: "white", variant: "link", onClick: onClose })] })));
};
const EditorToastNotification = () => {
    const { notification, closeNotification } = React.useContext(EditorToastNotificationContext);
    return (notification && (_jsx(Box, { children: _jsx(CustomToastMessage, { type: notification.variant, tracingID: notification.tracingID, onClose: closeNotification }) })));
};
export default EditorToastNotification;
//# sourceMappingURL=EditorToastNotification.js.map