import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction } from '../../../Utilities';
import { ShimmerElementType, ShimmerElementsDefaultHeights } from '../Shimmer.types';
import { ShimmerLine } from '../ShimmerLine/ShimmerLine';
import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle';
var getClassNames = classNamesFunction();
var ShimmerElementsGroupBase = /** @class */ (function (_super) {
    tslib_1.__extends(ShimmerElementsGroupBase, _super);
    function ShimmerElementsGroupBase(props) {
        var _this = _super.call(this, props) || this;
        _this._getRenderedElements = function (shimmerElements, rowHeight) {
            var renderedElements = shimmerElements ? (shimmerElements.map(function (elem, index) {
                var type = elem.type, filteredElem = tslib_1.__rest(elem, ["type"]);
                switch (elem.type) {
                    case ShimmerElementType.circle:
                        return (React.createElement(ShimmerCircle, tslib_1.__assign({ key: index }, filteredElem, { borderStyle: _this._getBorderStyles(elem, rowHeight) })));
                    case ShimmerElementType.gap:
                        return React.createElement(ShimmerGap, tslib_1.__assign({ key: index }, filteredElem, { borderStyle: _this._getBorderStyles(elem, rowHeight) }));
                    case ShimmerElementType.line:
                        return React.createElement(ShimmerLine, tslib_1.__assign({ key: index }, filteredElem, { borderStyle: _this._getBorderStyles(elem, rowHeight) }));
                }
            })) : (React.createElement(ShimmerLine, { height: ShimmerElementsDefaultHeights.line }));
            return renderedElements;
        };
        _this._getBorderStyles = function (elem, rowHeight) {
            var elemHeight = elem.height;
            var dif = rowHeight && elemHeight ? rowHeight - elemHeight : 0;
            var borderStyle;
            if (!elem.verticalAlign || elem.verticalAlign === 'center') {
                borderStyle = {
                    borderBottomWidth: (dif ? Math.floor(dif / 2) : 0) + "px",
                    borderTopWidth: (dif ? Math.ceil(dif / 2) : 0) + "px"
                };
            }
            else if (elem.verticalAlign && elem.verticalAlign === 'top') {
                borderStyle = {
                    borderBottomWidth: (dif ? dif : 0) + "px",
                    borderTopWidth: "0px"
                };
            }
            else if (elem.verticalAlign && elem.verticalAlign === 'bottom') {
                borderStyle = {
                    borderBottomWidth: "0px",
                    borderTopWidth: (dif ? dif : 0) + "px"
                };
            }
            return borderStyle;
        };
        /**
         * User should not worry to provide which of the elements is the highest, we do the calculation for him.
         * Plus if user forgot to specify the height we assign their defaults.
         */
        _this._findMaxElementHeight = function (elements) {
            var itemsDefaulted = elements.map(function (elem) {
                switch (elem.type) {
                    case ShimmerElementType.circle:
                        if (!elem.height) {
                            elem.height = ShimmerElementsDefaultHeights.circle;
                        }
                    case ShimmerElementType.line:
                        if (!elem.height) {
                            elem.height = ShimmerElementsDefaultHeights.line;
                        }
                    case ShimmerElementType.gap:
                        if (!elem.height) {
                            elem.height = ShimmerElementsDefaultHeights.gap;
                        }
                }
                return elem;
            });
            var rowHeight = itemsDefaulted.reduce(function (acc, next) {
                return next.height ? (next.height > acc ? next.height : acc) : acc;
            }, 0);
            return rowHeight;
        };
        return _this;
    }
    ShimmerElementsGroupBase.prototype.render = function () {
        var _a = this.props, styles = _a.styles, width = _a.width, shimmerElements = _a.shimmerElements, rowHeight = _a.rowHeight, flexWrap = _a.flexWrap, theme = _a.theme;
        this._classNames = getClassNames(styles, {
            theme: theme,
            flexWrap: flexWrap
        });
        var height = rowHeight ? rowHeight : this._findMaxElementHeight(shimmerElements ? shimmerElements : []);
        return (
        // tslint:disable-next-line:jsx-ban-props
        React.createElement("div", { style: { width: width ? width : 'auto' }, className: this._classNames.root }, this._getRenderedElements(shimmerElements, height)));
    };
    ShimmerElementsGroupBase.defaultProps = {
        flexWrap: false
    };
    return ShimmerElementsGroupBase;
}(BaseComponent));
export { ShimmerElementsGroupBase };
//# sourceMappingURL=ShimmerElementsGroup.base.js.map