import { create, tsx } from '@dojo/framework/core/vdom';
import theme from '../middleware/theme';
import * as css from '../theme/default/result.m.css';
import * as iconCss from '../theme/default/icon.m.css';
import Icon from '../icon';
export var StatusIcon;
(function (StatusIcon) {
    StatusIcon["alert"] = "alertIcon";
    StatusIcon["error"] = "cancelIcon";
    StatusIcon["info"] = "infoIcon";
    StatusIcon["success"] = "checkedBoxIcon";
})(StatusIcon || (StatusIcon = {}));
const factory = create({ theme })
    .properties()
    .children();
export const Result = factory(function Result({ children, properties, middleware: { theme } }) {
    const themeCss = theme.classes(css);
    const { title, subtitle, status, classes, variant } = properties();
    const { actionButtons, content, icon } = children()[0] || {};
    return (tsx("div", { key: "root", classes: [theme.variant(), themeCss.root] },
        (icon || status) && (tsx("div", { key: "iconWrapper", classes: [
                themeCss.iconWrapper,
                status ? themeCss[status] : null,
                status && !icon ? themeCss.statusIcon : null
            ] }, icon ? (icon) : (tsx(Icon, { key: "icon", type: StatusIcon[status], theme: theme.compose(iconCss, css, 'icon'), classes: classes, variant: variant })))),
        title && (tsx("div", { classes: themeCss.titleWrapper },
            tsx("h2", { classes: themeCss.title }, title),
            subtitle && tsx("h3", { classes: themeCss.subtitle }, subtitle))),
        content && tsx("div", { classes: themeCss.contentWrapper }, content),
        actionButtons && (tsx("div", { key: "actions", classes: themeCss.actions }, actionButtons && tsx("div", { classes: themeCss.actionButtons }, actionButtons)))));
});
export default Result;

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