"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dialog = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
const captureTabNavigation_1 = tslib_1.__importDefault(require("../utils/captureTabNavigation"));
const rebass_1 = require("rebass");
const Modal_1 = require("../Modal");
const useIsOpen_1 = tslib_1.__importDefault(require("./useIsOpen"));
const useAutoFocus_1 = tslib_1.__importDefault(require("../utils/useAutoFocus"));
const icons_1 = require("../icons");
const WindowModal_1 = require("../WindowModal");
const baseClassName = 'ab-Dialog';
exports.Dialog = React.forwardRef((props, dialogRef) => {
    let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps, ...boxProps } = props;
    modal = props.modal === undefined ? true : props.modal;
    fixed = props.fixed === undefined ? true : props.fixed;
    const [isOpen, setIsOpen] = (0, useIsOpen_1.default)(props);
    const boxRef = (0, react_1.useRef)(null);
    (0, useAutoFocus_1.default)({
        isOpen,
        autoFocus: props.autoFocus,
        previous: ({ autoFocus }) => autoFocus && isOpen,
        shouldFocus: ({ autoFocus }) => autoFocus && isOpen,
    }, boxRef);
    const showCloseButton = props.showCloseButton === undefined ? true : props.showCloseButton;
    const onKeyDown = (e) => {
        if (props.onKeyDown) {
            props.onKeyDown(e);
        }
        (0, captureTabNavigation_1.default)(boxRef.current, e);
        if (e.key === 'Escape') {
            if (e.nativeEvent.anotherModalClosed) {
                return;
            }
            e.nativeEvent.anotherModalClosed = true;
            const activeElement = document.activeElement;
            const ignoreTags = {
                input: 1,
                a: 1,
                button: 1,
            };
            if (activeElement && !!ignoreTags[activeElement.tagName]) {
                return;
            }
            setIsOpen(false);
        }
        (0, captureTabNavigation_1.default)(boxRef.current, event);
    };
    (0, react_1.useEffect)(() => {
        if (dismissOnClickOutside && isOpen) {
            const dismissDialog = (e) => {
                requestAnimationFrame(() => {
                    if (e.preventDialogDismiss) {
                        return;
                    }
                    setIsOpen(false);
                });
            };
            document.documentElement.addEventListener('click', dismissDialog, {
                passive: true,
                capture: false,
            });
            return () => {
                document.documentElement.removeEventListener('click', dismissDialog);
            };
        }
    }, [isOpen, dismissOnClickOutside]);
    const bringToFront = React.useCallback(() => {
        if (boxRef.current &&
            boxRef.current.focus &&
            (!document.activeElement || !(0, contains_1.default)(boxRef.current, document.activeElement))) {
            boxRef.current.focus();
        }
    }, [boxRef]);
    React.useImperativeHandle(dialogRef, () => ({
        bringToFront,
    }));
    (0, react_1.useEffect)(() => {
        let listener;
        if (focusOnBrowserVisible) {
            listener = () => {
                if (document.visibilityState === 'visible' && autoFocus && focusOnBrowserVisible) {
                    bringToFront();
                }
            };
            document.addEventListener('visibilitychange', listener);
        }
        return () => {
            if (listener) {
                document.removeEventListener('visibilitychange', listener);
            }
        };
    }, [autoFocus, focusOnBrowserVisible]);
    if (!isOpen) {
        return null;
    }
    const closeButton = showCloseButton ? (React.createElement(rebass_1.Box, { padding: 1, title: "Close dialog", onClick: () => setIsOpen(false), className: `${baseClassName}__close-button` },
        React.createElement(icons_1.Icon, { size: 24, name: "close" }))) : null;
    const setPreventDismissFlag = (e) => {
        if (dismissOnClickOutside) {
            e.nativeEvent.preventDialogDismiss = true;
        }
    };
    const box = (React.createElement(rebass_1.Box, { ...boxProps, onClick: (e) => {
            setPreventDismissFlag(e);
            if (boxProps && boxProps.onClick) {
                boxProps.onClick(e);
            }
        }, onKeyDown: onKeyDown, className: (0, join_1.default)(baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
        children,
        closeButton));
    const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: `${baseClassName}-fixed-wrapper` }, box)) : (box);
    if (windowModal) {
        return React.createElement(WindowModal_1.WindowModal, { ...windowModalProps }, content);
    }
    if (modal) {
        return (React.createElement(Modal_1.Modal, { ...modalProps, isOpen: isOpen, onBringToFront: bringToFront }, box));
    }
    return content;
});
exports.default = exports.Dialog;
