import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
import { classNamesFunction, memoizeFunction } from '@uifabric-vue/utilities';
import StatelessComponent from '../../StatelessComponent';
import { Component, Prop } from 'vue-property-decorator';
import { ShimmerElementsDefaultHeights, ShimmerElementType } from '../Shimmer.types';
import { ShimmerLine } from '../ShimmerLine/ShimmerLine';
import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle';
import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
var getClassNames = classNamesFunction();
var ShimmerElementsGroupBase = /** @class */ (function (_super) {
    __extends(ShimmerElementsGroupBase, _super);
    function ShimmerElementsGroupBase() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ShimmerElementsGroupBase.prototype.render = function (h, ctx) {
        var _a = ctx.props, styles = _a.styles, width = _a.width, shimmerElements = _a.shimmerElements, _b = _a.rowHeight, rowHeight = _b === void 0 ? findMaxElementHeight(shimmerElements || []) : _b, _c = _a.flexWrap, flexWrap = _c === void 0 ? false : _c, theme = _a.theme, backgroundColor = _a.backgroundColor;
        var classNames = getClassNames(styles, {
            theme: theme,
            flexWrap: flexWrap,
        });
        return h('div', {
            class: classNames.root,
            style: { width: width },
        }, [
            getRenderedElements(h, shimmerElements, backgroundColor, rowHeight),
        ]);
    };
    __decorate([
        Prop({ type: Array, default: undefined }),
        __metadata("design:type", Array)
    ], ShimmerElementsGroupBase.prototype, "shimmerElements", void 0);
    __decorate([
        Prop({ type: String, default: 'auto' }),
        __metadata("design:type", String)
    ], ShimmerElementsGroupBase.prototype, "width", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ShimmerElementsGroupBase.prototype, "flexWrap", void 0);
    ShimmerElementsGroupBase = __decorate([
        Component
    ], ShimmerElementsGroupBase);
    return ShimmerElementsGroupBase;
}(StatelessComponent));
export default ShimmerElementsGroupBase;
function getRenderedElements(h, shimmerElements, backgroundColor, rowHeight) {
    var renderedElements = shimmerElements
        ? shimmerElements.map(
        // false positive
        // eslint-disable-next-line array-callback-return
        function (element, index) {
            var type = element.type, filteredElem = __rest(element, ["type"]);
            var verticalAlign = filteredElem.verticalAlign, height = filteredElem.height;
            var styles = getElementStyles(verticalAlign, type, height, backgroundColor, rowHeight);
            var props = {
                key: index,
                attrs: __assign(__assign({}, filteredElem), { styles: styles }),
            };
            switch (element.type) {
                case ShimmerElementType.circle:
                    return h(ShimmerCircle, props);
                case ShimmerElementType.gap:
                    return h(ShimmerGap, props);
                case ShimmerElementType.line:
                    return h(ShimmerLine, props);
            }
        })
        : h(ShimmerLine, {
            attrs: {
                height: ShimmerElementsDefaultHeights.line,
            },
        });
    return renderedElements;
}
var getElementStyles = memoizeFunction(function (verticalAlign, elementType, elementHeight, backgroundColor, rowHeight) {
    var dif = rowHeight && elementHeight ? rowHeight - elementHeight : 0;
    var borderStyle;
    if (!verticalAlign || verticalAlign === 'center') {
        borderStyle = {
            borderBottomWidth: "".concat(dif ? Math.floor(dif / 2) : 0, "px"),
            borderTopWidth: "".concat(dif ? Math.ceil(dif / 2) : 0, "px"),
        };
    }
    else if (verticalAlign && verticalAlign === 'top') {
        borderStyle = {
            borderBottomWidth: "".concat(dif, "px"),
            borderTopWidth: "0px",
        };
    }
    else if (verticalAlign && verticalAlign === 'bottom') {
        borderStyle = {
            borderBottomWidth: "0px",
            borderTopWidth: "".concat(dif, "px"),
        };
    }
    if (backgroundColor) {
        switch (elementType) {
            case ShimmerElementType.circle:
                return {
                    root: __assign(__assign({}, borderStyle), { borderColor: backgroundColor }),
                    svg: { fill: backgroundColor },
                };
            case ShimmerElementType.gap:
                return {
                    root: __assign(__assign({}, borderStyle), { borderColor: backgroundColor, backgroundColor: backgroundColor }),
                };
            case ShimmerElementType.line:
                return {
                    root: __assign(__assign({}, borderStyle), { borderColor: backgroundColor }),
                    topLeftCorner: { fill: backgroundColor },
                    topRightCorner: { fill: backgroundColor },
                    bottomLeftCorner: { fill: backgroundColor },
                    bottomRightCorner: { fill: backgroundColor },
                };
        }
    }
    return {
        root: borderStyle,
    };
});
/**
 * User should not worry to provide which of the elements is the highest so we do the calculation for him.
 * Plus if user forgot to specify the height we assign their defaults.
 */
function findMaxElementHeight(shimmerElements) {
    var shimmerElementsDefaulted = shimmerElements.map(function (element) {
        switch (element.type) {
            case ShimmerElementType.circle:
                if (!element.height) {
                    element.height = ShimmerElementsDefaultHeights.circle;
                }
                break;
            case ShimmerElementType.line:
                if (!element.height) {
                    element.height = ShimmerElementsDefaultHeights.line;
                }
                break;
            case ShimmerElementType.gap:
                if (!element.height) {
                    element.height = ShimmerElementsDefaultHeights.gap;
                }
                break;
        }
        return element;
    });
    var rowHeight = shimmerElementsDefaulted.reduce(function (acc, next) {
        return next.height ? (next.height > acc ? next.height : acc) : acc;
    }, 0);
    return rowHeight;
}
//# sourceMappingURL=ShimmerElementsGroup.base.js.map