import * as tslib_1 from "tslib";
import { dimensions } from '@dojo/framework/core/middleware/dimensions';
import { create, tsx } from '@dojo/framework/core/vdom';
import Popup from '../popup';
import * as fixedCss from './trigger-popup.m.css';
import theme from '../middleware/theme';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
const icache = createICacheMiddleware();
const factory = create({ dimensions, icache, theme })
    .properties()
    .children();
export const TriggerPopup = factory(function TriggerPopup({ properties, children, middleware: { dimensions, icache, theme } }) {
    const _a = properties(), { matchWidth = true, onOpen, classes } = _a, otherProperties = tslib_1.__rest(_a, ["matchWidth", "onOpen", "classes"]);
    const { position: triggerPosition, size: triggerSize } = dimensions.get('trigger');
    const triggerTop = triggerPosition.top + document.documentElement.scrollTop;
    const triggerBottom = triggerTop + triggerSize.height;
    const themedCss = theme.classes(fixedCss);
    const wrapperStyles = {
        width: matchWidth ? `${triggerSize.width}px` : 'auto'
    };
    const { trigger, content } = children()[0];
    const close = () => {
        const { onClose } = properties();
        icache.set('open', false);
        onClose && onClose();
    };
    return (tsx("virtual", { classes: [themedCss.root] },
        tsx("span", { key: "trigger", classes: fixedCss.trigger }, trigger(() => {
            const { onOpen } = properties();
            icache.set('open', !icache.get('open'));
            onOpen && onOpen();
        })),
        tsx(Popup, Object.assign({ key: "popup" }, otherProperties, { classes: classes, yTop: triggerBottom, yBottom: triggerTop, xLeft: triggerPosition.left, xRight: triggerPosition.right, onClose: close, open: icache.get('open') }), (position) => (tsx("div", { key: "trigger-wrapper", styles: wrapperStyles }, content(close, position))))));
});
export default TriggerPopup;

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