"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef, useState } from "react";
import { useSsr } from "../SsrProvider.js";
import { useFocusContainer } from "../focus/useFocusContainer.js";
import { Overlay } from "../overlay/Overlay.js";
import { Portal } from "../portal/Portal.js";
import { useScrollLock } from "../scroll/useScrollLock.js";
import { useCSSTransition } from "../transition/useCSSTransition.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
import { DialogContainer } from "./DialogContainer.js";
import { NestedDialogProvider, useNestedDialogContext } from "./NestedDialogProvider.js";
import { dialog } from "./styles.js";
/** @since 4.0.0 */ export const DEFAULT_DIALOG_CLASSNAMES = {
    appear: "rmd-dialog--enter",
    appearActive: "rmd-dialog--enter-active",
    enter: "rmd-dialog--enter",
    enterActive: "rmd-dialog--enter-active",
    exit: "rmd-dialog--exit",
    exitActive: "rmd-dialog--exit-active"
};
/** @since 4.0.0 */ export const DEFAULT_DIALOG_TIMEOUT = {
    enter: 200,
    exit: 150
};
const noop = ()=>{
// do nothing
};
const noopBool = ()=>false;
/**
 * **Client Component**
 *
 * @example Simple Example
 * ```tsx
 * import {
 *   Button,
 *   Dialog,
 *   DialogHeader,
 *   DialogTitle,
 *   DialogContent,
 *   DialogFooter,
 *   Typography,
 *   useToggle,
 * } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const {
 *     toggle,
 *     disable: onRequestClose,
 *     toggled: visible,
 *   } = useToggle(false);
 *
 *   return (
 *     <>
 *       <Button onClick={toggle}>Toggle</Button>
 *       <Dialog
 *         aria-labelledby="dialog-title"
 *         visible={visible}
 *         onRequestClose={onRequestClose}
 *       >
 *         <DialogHeader>
 *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
 *         </DialogHeader>
 *         <DialogContent>
 *           <Typography margin="none">This is some text in a dialog.</Typography>
 *         </DialogContent>
 *         <DialogFooter>
 *           <Button onClick={onRequestClose}>
 *             Close
 *           </Button>
 *         </DialogFooter>
 *       </Dialog>
 *     </>
 *   );
 * }
 * ```
 *
 * @since 6.0.0 The `Dialog` no longer supports focusing elements
 * within once it becomes visible. You must manually add `autoFocus` to a
 * element instead.
 */ export const Dialog = /*#__PURE__*/ forwardRef(function Dialog(props, ref) {
    const { id: propId, fixed = false, modal = false, role = modal ? "alertdialog" : "dialog", type = "centered", tabIndex = -1, visible, onRequestClose, containerProps, temporary = true, className, timeout = DEFAULT_DIALOG_TIMEOUT, classNames = DEFAULT_DIALOG_CLASSNAMES, disableTransition = false, appear, enter, exit, onEnter = noop, onEntering = noop, onEntered, onExit = noop, onExiting = noop, onExited, exitedHidden = true, disableOverlay = false, overlayProps, overlayHidden, onKeyDown = noop, isFocusTypeDisabled = noopBool, disablePortal: propDisablePortal, disableScrollLock = false, disableEscapeClose = modal, disableFocusOutline = type === "full-page", children, ...remaining } = props;
    const id = useEnsuredId(propId, "dialog");
    const ssr = useSsr();
    const setChildVisible = useNestedDialogContext();
    const { eventHandlers, transitionOptions } = useFocusContainer({
        nodeRef: ref,
        activate: visible,
        onEntered,
        onEntering,
        onExiting,
        onExited,
        disableTransition,
        onKeyDown (event) {
            onKeyDown(event);
            if (event.isPropagationStopped() || modal || disableEscapeClose || event.key !== "Escape") {
                return;
            }
            // prevent parent dialogs from closing as well
            event.stopPropagation();
            onRequestClose();
        },
        isFocusTypeDisabled
    });
    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({
        transitionIn: visible,
        timeout,
        classNames,
        className: dialog({
            type,
            fixed,
            outline: !disableFocusOutline,
            className
        }),
        appear: appear && !disableTransition && !ssr,
        enter: enter && !disableTransition,
        exit: exit && !disableTransition,
        onEnter (appearing) {
            onEnter(appearing);
            setChildVisible(type !== "full-page");
        },
        onExit () {
            onExit();
            setChildVisible(false);
        },
        temporary,
        exitedHidden,
        disablePortal: propDisablePortal,
        ...transitionOptions
    });
    useScrollLock(!disableScrollLock && visible);
    // this makes it so that as more non-full page dialogs become visible, the
    // overlay does not become darker as more and more overlays are stacked upon
    // each other. only the top-most overlay will have and active background
    // color.
    const [isChildVisible, setIsChildVisible] = useState(false);
    return /*#__PURE__*/ _jsxs(NestedDialogProvider, {
        value: setIsChildVisible,
        children: [
            !disableOverlay && /*#__PURE__*/ _jsx(Overlay, {
                visible: visible,
                disableTransition: disableTransition,
                temporary: temporary,
                disablePortal: disablePortal,
                ...overlayProps,
                onClick: modal ? noop : onRequestClose,
                clickable: !modal,
                noOpacity: overlayHidden || isChildVisible
            }),
            /*#__PURE__*/ _jsx(Portal, {
                disabled: disablePortal,
                children: rendered && /*#__PURE__*/ _jsx(DialogContainer, {
                    ...containerProps,
                    className: cnb(containerProps?.className, !temporary && exitedHidden && stage === "exited" && DISPLAY_NONE_CLASS),
                    enabled: type === "centered",
                    children: /*#__PURE__*/ _jsx("div", {
                        "aria-modal": modal || undefined,
                        ...remaining,
                        ...elementProps,
                        ...eventHandlers,
                        id: id,
                        role: role,
                        tabIndex: tabIndex,
                        children: children
                    })
                })
            })
        ]
    });
});

//# sourceMappingURL=Dialog.js.map