import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import ReactLoading from 'react-loading';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import CommonContext from '../../configs/CommonContext';
import { messageAction } from '../../configs/sessionTypes';
import { EMPTY_TOAST } from './ToastMessage';
const LOADING_TOAST_ID = 'loading';
const MESSAGE_TOAST_ID = 'app-message';
const MESSAGE_AUTO_CLOSE_MS = 5000;
export default function AppToast() {
    const { t } = useTranslation('common');
    const { dispatch, state } = useContext(CommonContext);
    const messageValueRef = useRef(state.message.value);
    messageValueRef.current = state.message.value;
    const clearMessage = () => {
        if (!messageValueRef.current)
            return;
        dispatch(messageAction(EMPTY_TOAST));
    };
    const getLoading = () => (_jsxs("div", { className: "d-flex", children: [_jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 24, width: 24 }), _jsx("span", { className: "ms-3", children: state.toastLoadingText ?? t('generic.loading', { defaultValue: 'Loading...' }) })] }));
    useEffect(() => {
        const closeOnEscape = (e) => {
            if (e.key === 'Escape')
                toast.dismiss(MESSAGE_TOAST_ID);
        };
        window.addEventListener('keydown', closeOnEscape);
        return () => window.removeEventListener('keydown', closeOnEscape);
    }, []);
    useEffect(() => {
        if (state.toastLoading) {
            toast(getLoading(), {
                toastId: LOADING_TOAST_ID,
                position: 'top-right',
                autoClose: false,
                hideProgressBar: true,
                closeOnClick: false,
                pauseOnHover: true,
                draggable: false,
                theme: 'light',
            });
        }
        else {
            toast.dismiss(LOADING_TOAST_ID);
        }
    }, [state.toastLoading, state.toastLoadingText]);
    useEffect(() => {
        if (!state.message?.value)
            return;
        const baseOptions = {
            toastId: MESSAGE_TOAST_ID,
            autoClose: MESSAGE_AUTO_CLOSE_MS,
            closeOnClick: true,
            pauseOnFocusLoss: false,
            onClose: () => clearMessage(),
        };
        switch (state.message.type) {
            case 'error':
                toast.error(state.message.value, {
                    ...baseOptions,
                    onClick: () => {
                        navigator.clipboard.writeText(state.message.value);
                    },
                });
                break;
            case 'warning':
                toast.warning(state.message.value, baseOptions);
                break;
            case 'success':
                toast.success(state.message.value, baseOptions);
                break;
            default:
                toast(state.message.value, baseOptions);
                break;
        }
    }, [state.message]);
    return (_jsx(ToastContainer, { closeOnClick: true, autoClose: MESSAGE_AUTO_CLOSE_MS, pauseOnFocusLoss: false }));
}
