import { create, tsx } from '@dojo/framework/core/vdom';
import focus from '@dojo/framework/core/middleware/focus';
import Popup from '../popup';
import theme from '../middleware/theme';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import * as css from '../theme/default/context-popup.m.css';
const icache = createICacheMiddleware();
const factory = create({ icache, focus, theme })
    .properties()
    .children();
const CursorWidth = 2;
const CursorHeight = 4;
export const ContextPopup = factory(function ContextPopup({ properties, children, middleware: { icache, focus } }) {
    const { variant, theme, classes } = properties();
    const x = icache.getOrSet('x', 0);
    const y = icache.getOrSet('y', 0);
    const { trigger, content } = children()[0];
    const close = () => {
        const { onClose } = properties();
        icache.set('open', false);
        onClose && onClose();
    };
    return (tsx("virtual", null,
        tsx("div", { classes: css.trigger, key: "trigger", oncontextmenu: (event) => {
                const { onOpen } = properties();
                event.preventDefault();
                focus.focus();
                icache.set('x', event.pageX - CursorWidth);
                icache.set('y', event.pageY - CursorHeight);
                icache.set('open', true);
                onOpen && onOpen();
            } }, trigger),
        tsx(Popup, { key: "popup", theme: theme, variant: variant, classes: classes, yTop: y, yBottom: document.documentElement.scrollTop + document.documentElement.clientHeight, xLeft: x, xRight: x, onClose: close, position: "below", open: icache.get('open') },
            tsx("div", null, content({ close, shouldFocus: focus.shouldFocus })))));
});
export default ContextPopup;

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