"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 util_1 = require("../common/util");
var factory = vdom_1.create({ theme: theme_1.default })
    .properties()
    .children();
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, steps = _b.steps, themeProp = _b.theme;
    var stepRenderer;
    var _e = tslib_1.__read(children(), 1), renderer = _e[0];
    if (renderer && !util_1.isRenderResult(renderer)) {
        stepRenderer = renderer.step;
    }
    var stepWrappers = steps.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 title = step.title, description = step.description, subTitle = step.subTitle, _a = step.status, status = _a === void 0 ? defaultStatus : _a;
        if (stepRenderer) {
            return {
                content: stepRenderer(defaultStatus, index, step),
                status: status
            };
        }
        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)),
                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),
                    children()[index]))),
            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*/