import { createEffect, createMemo, mergeProps, onCleanup, splitProps } from "solid-js";
import classNames from "./classnames";
import ToastFade from "./ToastFade";
import ToastHeader from "./ToastHeader";
import ToastBody from "./ToastBody";
import { useBootstrapPrefix } from "./ThemeProvider";
import ToastContext from "./ToastContext";
const defaultProps = {
    transition: ToastFade,
    show: true,
    animation: true,
    delay: 5000,
    autohide: false,
};
const Toast = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "bsPrefix",
        "className",
        "transition",
        "show",
        "animation",
        "delay",
        "autohide",
        "onClose",
        "bg",
    ]);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "toast");
    // We use refs for these, because we don't want to restart the autohide
    // timer in case these values change.
    let delayRef = local.delay;
    let onCloseRef = local.onClose;
    createEffect(() => {
        delayRef = local.delay;
        onCloseRef = local.onClose;
    });
    let autohideTimeout;
    const autohideToast = createMemo(() => !!(local.autohide && local.show));
    const autohideFunc = createMemo(() => () => {
        if (autohideToast()) {
            onCloseRef?.();
        }
    });
    createEffect(() => {
        // Only reset timer if show or autohide changes.
        if (autohideToast()) {
            window.clearTimeout(autohideTimeout);
            autohideTimeout = window.setTimeout(autohideFunc(), delayRef);
        }
    });
    onCleanup(() => {
        window.clearTimeout(autohideTimeout);
    });
    const toastContext = {
        get onClose() {
            return local.onClose;
        },
    };
    const hasAnimation = !!(local.transition && local.animation);
    const Transition = local.transition;
    const ToastInner = () => (<div {...props} className={classNames(bsPrefix, local.className, local.bg && `bg-${local.bg}`, !hasAnimation && (local.show ? "show" : "hide"))} role="alert" aria-live="assertive" aria-atomic="true">
      {props.children}
    </div>);
    return (<ToastContext.Provider value={toastContext}>
      {hasAnimation && local.transition ? (<Transition appear in={local.show} unmountOnExit>
          <ToastInner />
        </Transition>) : (<ToastInner />)}
    </ToastContext.Provider>);
};
export default Object.assign(Toast, {
    Body: ToastBody,
    Header: ToastHeader,
});