"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var vdom_1 = require("@dojo/framework/core/vdom");
var theme_1 = require("../middleware/theme");
var icon_1 = require("../icon");
var css = require("../theme/default/wizard.m.css");
var avatarCss = require("../theme/default/avatar.m.css");
var avatar_1 = require("../avatar");
var stepFactory = vdom_1.create({ theme: theme_1.default })
    .properties()
    .children();
exports.Step = stepFactory(function (_a) {
    var children = _a.children, theme = _a.middleware.theme;
    var _b = tslib_1.__read(children(), 1), _c = _b[0], _d = _c === void 0 ? {
        description: undefined,
        title: undefined,
        subTitle: undefined
    } : _c, title = _d.title, subTitle = _d.subTitle, description = _d.description;
    var themedCss = theme.classes(css);
    return (vdom_1.tsx("div", { classes: [theme.variant(), themedCss.stepContent] },
        vdom_1.tsx("div", { classes: [
                themedCss.stepTitle,
                !title && themedCss.noTitle,
                !description && themedCss.noDescription
            ] },
            title,
            vdom_1.tsx("div", { classes: themedCss.stepSubTitle }, subTitle)),
        vdom_1.tsx("div", { classes: themedCss.stepDescription }, description)));
});
var factory = vdom_1.create({ theme: theme_1.default })
    .children()
    .properties();
exports.default = factory(function Wizard(_a) {
    var properties = _a.properties, children = _a.children, theme = _a.middleware.theme;
    var themedCss = theme.classes(css);
    var _b = properties(), activeStep = _b.activeStep, _c = _b.direction, direction = _c === void 0 ? 'horizontal' : _c, onStep = _b.onStep, _d = _b.clickable, clickable = _d === void 0 ? false : _d, classes = _b.classes, variant = _b.variant, themeProp = _b.theme;
    var stepNodes = children();
    var stepWrappers = stepNodes.map(function (step, index) {
        var content;
        var defaultStatus;
        if (activeStep === undefined) {
            defaultStatus = undefined;
        }
        else if (activeStep > index) {
            defaultStatus = 'complete';
        }
        else if (activeStep < index) {
            defaultStatus = 'pending';
        }
        else {
            defaultStatus = 'inProgress';
        }
        var _a = step.properties.status, status = _a === void 0 ? defaultStatus : _a;
        switch (status) {
            case 'complete':
                content = (vdom_1.tsx(icon_1.default, { type: "checkIcon", theme: themeProp, classes: classes, variant: variant }));
                break;
            case 'error':
                content = (vdom_1.tsx(icon_1.default, { type: "closeIcon", theme: themeProp, classes: classes, variant: variant }));
                break;
            default:
                content = String(index + 1);
        }
        return {
            content: (vdom_1.tsx("virtual", null,
                vdom_1.tsx("div", { classes: themedCss.stepIcon },
                    vdom_1.tsx(avatar_1.default, { theme: theme.compose(avatarCss, css, 'avatar'), classes: classes, variant: variant, outline: Boolean(status !== 'inProgress') }, content)),
                step)),
            status: status
        };
    });
    return (vdom_1.tsx("div", { key: "root", classes: [
            theme.variant(),
            themedCss.root,
            direction === 'horizontal' ? themedCss.horizontal : themedCss.vertical,
            clickable && themedCss.clickable
        ] }, stepWrappers.map(function (_a, index) {
        var content = _a.content, status = _a.status;
        return (vdom_1.tsx("div", { key: "step" + (index + 1), classes: [
                themedCss.step,
                status === 'complete' && themedCss.complete,
                status === 'pending' && themedCss.pending,
                status === 'error' && themedCss.error
            ], onclick: function () {
                if (clickable && onStep) {
                    onStep(index);
                }
            } },
            vdom_1.tsx("div", { classes: themedCss.tail }),
            content));
    })));
});

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