import i18n from '@dojo/framework/core/middleware/i18n';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import { uuid } from '@dojo/framework/core/util';
import { create, tsx } from '@dojo/framework/core/vdom';
import { formatAriaProperties, Keys } from '../common/util';
import Icon from '../icon';
import theme from '../middleware/theme';
import bodyScroll from '../middleware/bodyScroll';
import * as css from '../theme/default/dialog.m.css';
import * as fixedCss from './styles/dialog.m.css';
import bundle from './nls/Dialog';
import GlobalEvent from '../global-event';
import inert from '@dojo/framework/core/middleware/inert';
const factory = create({
    theme,
    i18n,
    icache: createICacheMiddleware(),
    inert,
    bodyScroll
})
    .properties()
    .children();
export const Dialog = factory(function Dialog({ middleware: { theme, i18n, icache, inert, bodyScroll }, properties, children }) {
    const themeCss = theme.classes(css);
    let { open, aria = {}, underlay, role = 'dialog', closeable = true, closeText, classes, theme: themeProp, variant } = properties();
    const [{ title, actions, content }] = children();
    const modal = role === 'alertdialog' || properties().modal;
    inert.set('dialog', open, true);
    if (!closeText) {
        const { messages } = i18n.localize(bundle);
        closeText = `${messages.close} ${title || ''}`;
    }
    const wasOpen = icache.getOrSet('wasOpen', false);
    const titleId = icache.getOrSet('titleId', uuid());
    const contentId = icache.getOrSet('contentId', uuid());
    const onOpen = () => {
        const { onOpen } = properties();
        icache.set('callFocus', true);
        onOpen && onOpen();
    };
    const close = () => {
        const { closeable = true, onRequestClose } = properties();
        closeable && onRequestClose();
    };
    open && !wasOpen && onOpen();
    if (wasOpen !== open) {
        icache.set('wasOpen', open);
    }
    const callFocus = icache.getOrSet('callFocus', false);
    if (callFocus) {
        icache.set('callFocus', false);
    }
    const keyup = (event) => {
        event.stopPropagation();
        if (event.which === Keys.Escape) {
            close();
        }
    };
    bodyScroll(!open);
    return (tsx("body", null,
        tsx("div", { key: "dialog", classes: [theme.variant(), themeCss.root, open ? themeCss.open : null] }, open && (tsx("virtual", null,
            tsx(GlobalEvent, { key: "global", document: { keyup } }),
            tsx("div", { classes: [
                    underlay ? themeCss.underlayVisible : null,
                    fixedCss.underlay
                ], enterAnimation: themeCss.underlayEnter, exitAnimation: themeCss.underlayExit, key: "underlay", onclick: (event) => {
                    const { role } = properties();
                    const modal = role === 'alertdialog' ||
                        properties().modal;
                    event.stopPropagation();
                    !modal && close();
                } }),
            tsx("div", Object.assign({ "aria-labelledby": titleId, "aria-modal": modal ? 'true' : 'false', "aria-describedby": role === 'alertdialog' ? contentId : undefined }, formatAriaProperties(aria), { classes: [themeCss.main, fixedCss.main], enterAnimation: themeCss.enter, exitAnimation: themeCss.exit, key: "main", role: role, tabIndex: -1, focus: callFocus }),
                tsx("div", { classes: themeCss.title, key: "title", id: titleId },
                    tsx("div", null, title),
                    closeable && (tsx("button", { classes: themeCss.close, type: "button", onclick: (event) => {
                            event.stopPropagation();
                            close();
                        } },
                        closeText,
                        tsx("span", { classes: themeCss.closeIcon },
                            tsx(Icon, { theme: themeProp, classes: classes, variant: variant, type: "closeIcon" }))))),
                tsx("div", { classes: themeCss.content, key: "content", id: contentId }, content),
                actions && (tsx("div", { classes: themeCss.actions, key: "actions" }, actions))))))));
});
export default Dialog;

/*# sourceMappingURL=index.mjs.map*/