import * as tslib_1 from "tslib";
import { create, tsx } from '@dojo/framework/core/vdom';
import i18n from '@dojo/framework/core/middleware/i18n';
import theme from '../middleware/theme';
import TriggerPopup from '../trigger-popup';
import Button from '../button';
import * as buttonCss from '../theme/default/button.m.css';
import * as css from '../theme/default/popup-confirmation.m.css';
import bundle from './nls/PopupConfirmation';
const factory = create({ theme, i18n })
    .properties()
    .children();
export default factory(function PopupConfirmation({ middleware: { theme, i18n }, properties, children }) {
    const _a = properties(), { onCancel, onConfirm, classes, theme: inheritedTheme, variant } = _a, otherProperties = tslib_1.__rest(_a, ["onCancel", "onConfirm", "classes", "theme", "variant"]);
    const [{ content, trigger }] = children();
    const themedCss = theme.classes(css);
    const { messages } = i18n.localize(bundle);
    return (tsx("div", { classes: [themedCss.root, theme.variant()] },
        tsx(TriggerPopup, Object.assign({ classes: classes, theme: inheritedTheme, variant: variant, key: "trigger-popup" }, otherProperties), {
            trigger,
            content: (close, position) => (tsx("div", { classes: [
                    themedCss.popupContainer,
                    position === 'above' ? themedCss.above : themedCss.below
                ] },
                tsx("div", { classes: themedCss.popup },
                    tsx("div", { classes: themedCss.popupContent }, content),
                    tsx("div", { classes: themedCss.popupControls },
                        tsx(Button, { classes: classes, key: "cancel-button", type: "button", theme: theme.compose(buttonCss, css, 'cancel'), variant: variant, onClick: () => {
                                close();
                                onCancel && onCancel();
                            } }, messages.no),
                        tsx(Button, { classes: classes, key: "confirm-button", type: "button", theme: theme.compose(buttonCss, css, 'confirm'), variant: variant, onClick: () => {
                                close();
                                onConfirm && onConfirm();
                            } }, messages.yes)))))
        })));
});

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