import { __extends, __decorate, __metadata, __rest, __assign } from 'tslib';
import { classNamesFunction, memoizeFunction } from '@uifabric-vue/utilities';
import StatelessComponent from '../../StatelessComponent.js';
import { Prop, Component } from 'vue-property-decorator';
import { ShimmerElementType, ShimmerElementsDefaultHeights } from '../Shimmer.types.js';
import { ShimmerLine } from '../ShimmerLine/ShimmerLine.js';
import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle.js';
import { ShimmerGap } from '../ShimmerGap/ShimmerGap.js';

var getClassNames = classNamesFunction();
var ShimmerElementsGroupBase = function(_super) {
  __extends(ShimmerElementsGroupBase2, _super);
  function ShimmerElementsGroupBase2() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  ShimmerElementsGroupBase2.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: void 0 }),
    __metadata("design:type", Array)
  ], ShimmerElementsGroupBase2.prototype, "shimmerElements", void 0);
  __decorate([
    Prop({ type: String, default: "auto" }),
    __metadata("design:type", String)
  ], ShimmerElementsGroupBase2.prototype, "width", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], ShimmerElementsGroupBase2.prototype, "flexWrap", void 0);
  ShimmerElementsGroupBase2 = __decorate([
    Component
  ], ShimmerElementsGroupBase2);
  return ShimmerElementsGroupBase2;
}(StatelessComponent);
var ShimmerElementsGroupBase$1 = ShimmerElementsGroupBase;
function getRenderedElements(h, shimmerElements, backgroundColor, rowHeight) {
  var renderedElements = shimmerElements ? shimmerElements.map(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
  };
});
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;
}

export { ShimmerElementsGroupBase$1 as default };
