import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, classNamesFunction } from '../../Utilities';
import { SelectionMode } from '../../utilities/selection/interfaces';
import { DetailsList } from './DetailsList';
import { Shimmer, ShimmerElementsGroup, ShimmerElementType } from '../Shimmer';
import { getClassNames as getRowClassNames } from './DetailsRow.classNames';
import { CheckboxVisibility } from './DetailsList.types';
export var getClassNames = classNamesFunction();
var SHIMMER_INITIAL_ITEMS = 10;
var DEFAULT_SHIMMER_HEIGHT = 7;
// This values are matching values from ./DetailsRow.css
var DEFAULT_SIDE_PADDING = 8;
var DEFAULT_ROW_HEIGHT = 42;
var COMPACT_ROW_HEIGHT = 32;
var ShimmeredDetailsListBase = /** @class */ (function (_super) {
    tslib_1.__extends(ShimmeredDetailsListBase, _super);
    function ShimmeredDetailsListBase(props) {
        var _this = _super.call(this, props) || this;
        _this._onRenderShimmerPlaceholder = function (index, rowProps) {
            var _a = _this.props, onRenderCustomPlaceholder = _a.onRenderCustomPlaceholder, compact = _a.compact;
            var selectionMode = rowProps.selectionMode, checkboxVisibility = rowProps.checkboxVisibility, theme = rowProps.theme, styles = rowProps.styles;
            var showCheckbox = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden;
            var rowClassNames = getRowClassNames(styles, {
                theme: theme
            });
            var placeholderElements = onRenderCustomPlaceholder
                ? onRenderCustomPlaceholder()
                : _this._renderDefaultShimmerPlaceholder(rowProps);
            return (React.createElement("div", { className: css(showCheckbox && rowClassNames.shimmerLeftBorder, !compact && rowClassNames.shimmerBottomBorder) },
                React.createElement(Shimmer, { customElementsGroup: placeholderElements })));
        };
        _this._renderDefaultShimmerPlaceholder = function (rowProps) {
            var columns = rowProps.columns, compact = rowProps.compact;
            var shimmerElementsRow = [];
            var gapHeight = compact ? COMPACT_ROW_HEIGHT : DEFAULT_ROW_HEIGHT;
            columns.map(function (column, columnIdx) {
                var shimmerElements = [];
                var groupWidth = DEFAULT_SIDE_PADDING * 2 + column.calculatedWidth;
                shimmerElements.push({
                    type: ShimmerElementType.gap,
                    width: DEFAULT_SIDE_PADDING,
                    height: gapHeight
                });
                if (column.isIconOnly) {
                    shimmerElements.push({
                        type: ShimmerElementType.line,
                        width: column.calculatedWidth,
                        height: column.calculatedWidth
                    });
                    shimmerElements.push({
                        type: ShimmerElementType.gap,
                        width: DEFAULT_SIDE_PADDING,
                        height: gapHeight
                    });
                }
                else {
                    shimmerElements.push({
                        type: ShimmerElementType.line,
                        width: column.calculatedWidth - DEFAULT_SIDE_PADDING * 3,
                        height: DEFAULT_SHIMMER_HEIGHT
                    });
                    shimmerElements.push({
                        type: ShimmerElementType.gap,
                        width: DEFAULT_SIDE_PADDING * 4,
                        height: gapHeight
                    });
                }
                shimmerElementsRow.push(React.createElement(ShimmerElementsGroup, { key: columnIdx, width: groupWidth + "px", shimmerElements: shimmerElements }));
            });
            // When resizing the window from narrow to wider, we need to cover the exposed Shimmer wave until the column resizing logic is done.
            shimmerElementsRow.push(React.createElement(ShimmerElementsGroup, { key: 'endGap', width: '100%', shimmerElements: [{ type: ShimmerElementType.gap, width: '100%', height: gapHeight }] }));
            return React.createElement("div", { style: { display: 'flex' } }, shimmerElementsRow);
        };
        _this._shimmerItems = props.shimmerLines ? new Array(props.shimmerLines) : new Array(SHIMMER_INITIAL_ITEMS);
        return _this;
    }
    ShimmeredDetailsListBase.prototype.render = function () {
        var _a = this.props, items = _a.items, listProps = _a.listProps, styles = _a.styles, theme = _a.theme, shimmerLines = _a.shimmerLines, onRenderCustomPlaceholder = _a.onRenderCustomPlaceholder, enableShimmer = _a.enableShimmer, detailsListProps = tslib_1.__rest(_a, ["items", "listProps", "styles", "theme", "shimmerLines", "onRenderCustomPlaceholder", "enableShimmer"]);
        // Adds to the optional listProp classname a fading out overlay classname only when shimmer enabled.
        var classNames = getClassNames(styles, {
            theme: theme,
            className: listProps && listProps.className,
            enableShimmer: enableShimmer
        });
        var newListProps = tslib_1.__assign({}, listProps, { className: classNames.root });
        return (React.createElement(DetailsList, tslib_1.__assign({}, detailsListProps, { enableShimmer: enableShimmer, items: enableShimmer ? this._shimmerItems : items, onRenderMissingItem: this._onRenderShimmerPlaceholder, listProps: newListProps })));
    };
    return ShimmeredDetailsListBase;
}(BaseComponent));
export { ShimmeredDetailsListBase };
//# sourceMappingURL=ShimmeredDetailsList.base.js.map