"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var vdom_1 = require("@dojo/framework/core/vdom");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var theme_1 = require("../middleware/theme");
var fixedCss = require("./styles/stack.m.css");
var css = require("../theme/default/stack.m.css");
var Spacer_1 = require("./Spacer");
exports.Spacer = Spacer_1.Spacer;
var factory = vdom_1.create({ icache: icache_1.default, theme: theme_1.default }).properties();
exports.Stack = factory(function Stack(_a) {
    var properties = _a.properties, _b = _a.middleware, icache = _b.icache, theme = _b.theme, children = _a.children;
    var _c = properties(), direction = _c.direction, align = _c.align, spacing = _c.spacing, _d = _c.padding, padding = _d === void 0 ? false : _d, _e = _c.stretch, stretch = _e === void 0 ? false : _e;
    var themeCss = theme.classes(css);
    var spacingClass;
    var paddingClass;
    var alignClass;
    switch (spacing) {
        case 'small':
            spacingClass = themeCss.smallSpacing;
            break;
        case 'medium':
            spacingClass = themeCss.mediumSpacing;
            break;
        case 'large':
            spacingClass = themeCss.largeSpacing;
            break;
        default:
            break;
    }
    switch (padding) {
        case 'small':
            paddingClass = themeCss.smallPadding;
            break;
        case 'medium':
            paddingClass = themeCss.mediumPadding;
            break;
        case 'large':
            paddingClass = themeCss.largePadding;
            break;
        default:
            break;
    }
    switch (align) {
        case 'start':
            alignClass = fixedCss.start;
            break;
        case 'middle':
            alignClass = fixedCss.middle;
            break;
        case 'end':
            alignClass = fixedCss.end;
            break;
        default:
            break;
    }
    var wrappedChildren = children().map(function (child, index) {
        if (vdom_1.isWNode(child) || vdom_1.isVNode(child)) {
            // A callback that allows the stack to control the flex span
            // of the wrapping node of a spacer required for using the stacks
            // as a custom element.
            child.properties.spanCallback = function (span) {
                var currentSpan = icache.get("span-" + index);
                if (currentSpan !== span) {
                    icache.set("span-" + index, span);
                }
            };
        }
        var span = icache.get("span-" + index);
        if (span) {
            return (vdom_1.tsx("div", { key: index, styles: { flex: "" + span }, classes: [fixedCss.spacer] }, child));
        }
        return (vdom_1.tsx("div", { key: index, classes: [spacingClass, direction === 'vertical' && alignClass, fixedCss.child] }, child));
    });
    return (vdom_1.tsx("div", { classes: [
            theme.variant(),
            direction === 'horizontal' ? themeCss.horizontal : themeCss.vertical,
            direction === 'horizontal' ? fixedCss.horizontal : fixedCss.vertical,
            fixedCss.root,
            direction === 'horizontal' && alignClass,
            paddingClass,
            stretch && fixedCss.stretch
        ] }, wrappedChildren));
});
exports.default = exports.Stack;

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