import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import { styled, useStyleConfig, vui } from '../core';
import { Modal } from '../modal';
import { cs, isJsx, isReactText, random, useIds } from '../utils';
import { modalAnimation, modalJustifyContent } from './consts';
import { DialogProvider } from './context';
import DialogBody from './dialogBody';
import DialogCancelButton from './dialogCancelButton';
import DialogCloseButton from './dialogCloseButton';
import DialogFooter from './dialogFooter';
import DialogHeader from './dialogHeader';
import DialogIcon from './dialogIcon';
import DialogSubmitButton from './dialogSubmitButton';
import DialogTitle from './dialogTitle';
export const DialogBase = styled.divBox `
  background-color: white;
  border-radius: 1px;
  box-shadow: modal;
  display: flex;
  flex-direction: column;
  width: 100%;
`;
/**
 * Displays content in a Modal window. Includes required accessibility configuration.
 *
 * Dialog is built upon `Modal`.
 *
 * The content can include important information, like warnings or errors, simple forms or prompts for user's decision. It blocks interaction with the rest of the page, but often can be disabled by pressing Escape, clicking on the backdrop or close button.
 */
export const Dialog = vui((props, ref) => {
    const { body: bodyProp, cancelButton, children, className, closeButton, disableBackdropClose, footer, header, icon, id, isOpen, modalProps: modalPropsProp, placement = 'center', onClose, size, status, submitButton, title, variant, ...rest } = props;
    const styles = useStyleConfig('Dialog', props);
    const idRef = useRef(id ?? random().toString());
    const [dialogId, bodyId, titleId] = useIds(idRef.current, ['dialog', 'dialog-body', 'dialog-title']);
    const body = isReactText(bodyProp) ? { children: bodyProp } : bodyProp;
    const showHeader = Boolean(header || closeButton || icon || title);
    const showFooter = Boolean(footer || cancelButton || submitButton);
    const ariaProps = {
        'aria-describedby': bodyId,
        'aria-labelledby': titleId,
    };
    const modalProps = {
        animation: modalAnimation[placement],
        contentProps: {
            alignItems: placement === 'center' ? 'center' : 'auto',
            justifyContent: modalJustifyContent[placement],
            ...modalPropsProp?.contentProps,
        },
        ...modalPropsProp,
    };
    const context = { bodyId, icon, isOpen, onClose, size, status, titleId, variant };
    return (_jsx(DialogProvider, { value: context, children: _jsx(Modal, { isOpen, onClose, ...modalProps, disableBackdropClose, children: _jsx(DialogBase, { className: cs('vui-dialog', className), id: dialogId, maxH: placement === 'center' ? 'calc(100vh - 32px)' : '100%', ref: ref, role: "dialog", ...ariaProps, ...styles.container, ...rest, children: children ?? (_jsxs(_Fragment, { children: [isJsx(header) ? header : showHeader && _jsx(DialogHeader, { closeButton, icon, title, ...header }), isJsx(body) ? body : body && _jsx(DialogBody, { ...body }), isJsx(footer) ? footer : showFooter && _jsx(DialogFooter, { cancelButton, submitButton, ...footer })] })) }) }) }));
});
Dialog.Body = DialogBody;
Dialog.CancelButton = DialogCancelButton;
Dialog.CloseButton = DialogCloseButton;
Dialog.Footer = DialogFooter;
Dialog.Header = DialogHeader;
Dialog.Icon = DialogIcon;
Dialog.SubmitButton = DialogSubmitButton;
Dialog.Title = DialogTitle;
Dialog.displayName = 'Dialog';
export default Dialog;
//# sourceMappingURL=dialog.js.map