import * as tslib_1 from "tslib";
import { parseGap, parsePadding } from './StackUtils';
import { getGlobalClassNames } from '../../Styling';
var nameMap = {
    start: 'flex-start',
    end: 'flex-end'
};
var GlobalClassNames = {
    root: 'ms-Stack',
    inner: 'ms-Stack-inner'
};
export var styles = function (props, theme, tokens) {
    var _a, _b, _c, _d, _e, _f, _g;
    var verticalFill = props.verticalFill, horizontal = props.horizontal, reversed = props.reversed, gap = props.gap, grow = props.grow, wrap = props.wrap, horizontalAlign = props.horizontalAlign, verticalAlign = props.verticalAlign, disableShrink = props.disableShrink, className = props.className;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    var childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : gap;
    var maxHeight = tokens && tokens.maxHeight ? tokens.maxHeight : props.maxHeight;
    var maxWidth = tokens && tokens.maxWidth ? tokens.maxWidth : props.maxWidth;
    var padding = tokens && tokens.padding ? tokens.padding : props.padding;
    var _h = parseGap(childrenGap, theme), rowGap = _h.rowGap, columnGap = _h.columnGap;
    var horizontalMargin = "" + -0.5 * columnGap.value + columnGap.unit;
    var verticalMargin = "" + -0.5 * rowGap.value + rowGap.unit;
    // styles to be applied to all direct children regardless of wrap or direction
    var childStyles = {
        textOverflow: 'ellipsis'
    };
    // selectors to be applied regardless of wrap or direction
    var commonSelectors = {
        // flexShrink styles are applied by the StackItem
        '> *:not(.ms-StackItem)': {
            flexShrink: disableShrink ? 0 : 1
        }
    };
    if (wrap) {
        return {
            root: [
                classNames.root,
                {
                    flexWrap: 'wrap',
                    maxWidth: maxWidth,
                    maxHeight: maxHeight,
                    width: 'auto',
                    overflow: 'visible',
                    height: '100%'
                },
                horizontalAlign && (_a = {},
                    _a[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
                    _a),
                verticalAlign && (_b = {},
                    _b[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
                    _b),
                className,
                {
                    // not allowed to be overridden by className
                    // since this is necessary in order to prevent collapsing margins
                    display: 'flex'
                },
                horizontal && {
                    height: verticalFill ? '100%' : 'auto'
                }
            ],
            inner: [
                classNames.inner,
                {
                    display: 'flex',
                    flexWrap: 'wrap',
                    marginLeft: horizontalMargin,
                    marginRight: horizontalMargin,
                    marginTop: verticalMargin,
                    marginBottom: verticalMargin,
                    overflow: 'visible',
                    boxSizing: 'border-box',
                    padding: parsePadding(padding, theme),
                    // avoid unnecessary calc() calls if horizontal gap is 0
                    width: columnGap.value === 0 ? '100%' : "calc(100% + " + columnGap.value + columnGap.unit + ")",
                    maxWidth: '100vw',
                    selectors: tslib_1.__assign({ '> *': tslib_1.__assign({ margin: "" + 0.5 * rowGap.value + rowGap.unit + " " + 0.5 * columnGap.value + columnGap.unit }, childStyles) }, commonSelectors)
                },
                horizontalAlign && (_c = {},
                    _c[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
                    _c),
                verticalAlign && (_d = {},
                    _d[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
                    _d),
                horizontal && {
                    flexDirection: reversed ? 'row-reverse' : 'row',
                    // avoid unnecessary calc() calls if vertical gap is 0
                    height: rowGap.value === 0 ? '100%' : "calc(100% + " + rowGap.value + rowGap.unit + ")",
                    selectors: {
                        '> *': {
                            maxWidth: columnGap.value === 0 ? '100%' : "calc(100% - " + columnGap.value + columnGap.unit + ")"
                        }
                    }
                },
                !horizontal && {
                    flexDirection: reversed ? 'column-reverse' : 'column',
                    height: "calc(100% + " + rowGap.value + rowGap.unit + ")",
                    selectors: {
                        '> *': {
                            maxHeight: rowGap.value === 0 ? '100%' : "calc(100% - " + rowGap.value + rowGap.unit + ")"
                        }
                    }
                }
            ]
        };
    }
    return {
        root: [
            classNames.root,
            {
                display: 'flex',
                flexDirection: horizontal ? (reversed ? 'row-reverse' : 'row') : reversed ? 'column-reverse' : 'column',
                flexWrap: 'nowrap',
                width: 'auto',
                height: verticalFill ? '100%' : 'auto',
                maxWidth: maxWidth,
                maxHeight: maxHeight,
                padding: parsePadding(padding, theme),
                boxSizing: 'border-box',
                selectors: tslib_1.__assign((_e = { '> *': childStyles }, _e[reversed ? '> *:not(:last-child)' : '> *:not(:first-child)'] = [
                    horizontal && {
                        marginLeft: "" + columnGap.value + columnGap.unit
                    },
                    !horizontal && {
                        marginTop: "" + rowGap.value + rowGap.unit
                    }
                ], _e), commonSelectors)
            },
            grow && {
                flexGrow: grow === true ? 1 : grow
            },
            horizontalAlign && (_f = {},
                _f[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
                _f),
            verticalAlign && (_g = {},
                _g[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
                _g),
            className
        ]
        // TODO: this cast may be hiding some potential issues with styling and name
        //        lookups and should be removed
    };
};
//# sourceMappingURL=Stack.styles.js.map