import { tsx, create, isWNode, isVNode } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';
import theme from '../middleware/theme';
import * as fixedCss from './styles/stack.m.css';
import * as css from '../theme/default/stack.m.css';
export { Spacer } from './Spacer';
const factory = create({ icache, theme }).properties();
export const Stack = factory(function Stack({ properties, middleware: { icache, theme }, children }) {
    const { direction, align, spacing, padding = false, stretch = false } = properties();
    const themeCss = theme.classes(css);
    let spacingClass;
    let paddingClass;
    let 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;
    }
    const wrappedChildren = children().map((child, index) => {
        if (isWNode(child) || 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 = (span) => {
                const currentSpan = icache.get(`span-${index}`);
                if (currentSpan !== span) {
                    icache.set(`span-${index}`, span);
                }
            };
        }
        const span = icache.get(`span-${index}`);
        if (span) {
            return (tsx("div", { key: index, styles: { flex: `${span}` }, classes: [fixedCss.spacer] }, child));
        }
        return (tsx("div", { key: index, classes: [spacingClass, direction === 'vertical' && alignClass, fixedCss.child] }, child));
    });
    return (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));
});
export default Stack;

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