import CheckCircle from '../../../../../../node_modules/@mui/icons-material/esm/CheckCircle.mjs';
import CloseIcon from '../../../../../../node_modules/@mui/icons-material/esm/Close.mjs';
import ErrorIcon from '../../../../../../node_modules/@mui/icons-material/esm/Error.mjs';
import wn from '../../../../../../node_modules/preact/compat/dist/compat.module.mjs';
import { mergeSx } from '../utils/mergeSx.mjs';
import { noop } from '../utils/noop.mjs';
import styled from '../../../../../../node_modules/@mui/material/styles/styled.mjs';
import Snackbar from '../../../../../../node_modules/@mui/material/Snackbar/Snackbar.mjs';
import IconButton from '../../../../../../node_modules/@mui/material/IconButton/IconButton.mjs';
import Alert from '../../../../../../node_modules/@mui/material/Alert/Alert.mjs';
import alertClasses from '../../../../../../node_modules/@mui/material/Alert/alertClasses.mjs';
import { useState as h, useRef as _, useCallback as T, useContext as q } from '../../../../../../node_modules/preact/hooks/dist/hooks.module.mjs';
import { createContext as F } from '../../../../../../node_modules/preact/dist/preact.module.mjs';

const StyledSnackbar = styled(Snackbar)(({ theme })=>({
        bottom: theme.spacing(5)
    }));
const CloseButton$1 = styled(IconButton)(({ theme })=>({
        padding: theme.spacing(0.5)
    }));
const StyledAlert$1 = styled(Alert)(({ theme })=>({
        [`& .${alertClasses.icon}`]: {
            marginRight: theme.spacing(1)
        },
        [`& .${alertClasses.message}`]: {
            padding: 0
        },
        [`& .${alertClasses.action}`]: {
            marginRight: theme.spacing(-0.5)
        },
        [theme.breakpoints.down('sm')]: {
            width: '100%'
        },
        width: 512,
        padding: theme.spacing(1, 1.5),
        display: 'flex',
        alignItems: 'center',
        '& p': {}
    }));
const DEFAULT_STATE$1 = {
    openToast: noop,
    closeToast: noop
};
const ToastContext = /*#__PURE__*/ F(DEFAULT_STATE$1);
const useToast = ()=>q(ToastContext);
const ToastContextProviderCore = ({ children, alertSx, closeIconSx, errorIconSx, successIconSx, errorSx, successSx, TypographyComponent: Typography })=>{
    const [open, setOpen] = h(false);
    const [toastText, setToastText] = h('');
    const [toastType, setToastType] = h('success');
    const timeoutRef = _(null);
    const closeToast = ()=>setOpen(false);
    const triggerOpen = T((openDurationMS)=>{
        setOpen(true);
        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
        }
        timeoutRef.current = setTimeout(()=>{
            setOpen(false);
        }, openDurationMS);
    }, []);
    // Without this useCallback, the value of openToast changes on every render
    // causing downstream code shaped like
    // `useEffect(() => ..., [openToast])`
    // to run again, which we don't want to do
    const openToast = T(({ type, text, openDurationMS = 5000 })=>{
        setToastType(type);
        setToastText(text);
        triggerOpen(openDurationMS);
    }, [
        triggerOpen
    ]);
    return /*#__PURE__*/ wn.createElement(ToastContext.Provider, {
        value: {
            openToast,
            closeToast
        }
    }, /*#__PURE__*/ wn.createElement(StyledSnackbar, {
        anchorOrigin: {
            horizontal: 'center',
            vertical: 'bottom'
        },
        open: open
    }, /*#__PURE__*/ wn.createElement(StyledAlert$1, {
        sx: mergeSx(alertSx, toastType === 'error' ? errorSx : successSx),
        action: /*#__PURE__*/ wn.createElement(CloseButton$1, {
            onClick: closeToast,
            size: "large"
        }, /*#__PURE__*/ wn.createElement(CloseIcon, {
            fontSize: "small",
            sx: mergeSx(closeIconSx, toastType === 'error' ? errorIconSx : successIconSx)
        })),
        elevation: 6,
        icon: toastType === 'error' ? /*#__PURE__*/ wn.createElement(ErrorIcon, {
            fontSize: "small",
            sx: errorIconSx
        }) : /*#__PURE__*/ wn.createElement(CheckCircle, {
            fontSize: "small",
            sx: successIconSx
        }),
        type: toastType,
        variant: "filled"
    }, /*#__PURE__*/ wn.createElement(Typography, {
        variant: "body2"
    }, toastText))), children);
};

export { ToastContext, ToastContextProviderCore, useToast };
//# sourceMappingURL=Toast.mjs.map
