import * as tslib_1 from "tslib";
import * as React from 'react';
import { Icon } from '../../Icon';
import { Image } from '../../Image';
import { Link } from '../../Link';
import { BaseComponent, classNamesFunction, css } from '../../Utilities';
var LIST_ITEM_COUNT = 3;
var getClassNames = classNamesFunction();
/**
 * {@docCategory DocumentCard}
 */
var DocumentCardPreviewBase = /** @class */ (function (_super) {
    tslib_1.__extends(DocumentCardPreviewBase, _super);
    function DocumentCardPreviewBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._renderPreviewList = function (previewImages) {
            var getOverflowDocumentCountText = _this.props.getOverflowDocumentCountText;
            // Determine how many documents we won't be showing
            var overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
            // Determine the overflow text that will be rendered after the preview list.
            var overflowText = overflowDocumentCount
                ? getOverflowDocumentCountText
                    ? getOverflowDocumentCountText(overflowDocumentCount)
                    : '+' + overflowDocumentCount
                : null;
            // Create list items for the documents to be shown
            var fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map(function (file, fileIndex) { return (React.createElement("li", { key: fileIndex },
                React.createElement(Image, { className: _this._classNames.fileListIcon, src: file.iconSrc, role: "presentation", alt: "", width: "16px", height: "16px" }),
                React.createElement(Link, tslib_1.__assign({}, (file.linkProps, { href: file.url || (file.linkProps && file.linkProps.href) })), file.name))); });
            return (React.createElement("div", null,
                React.createElement("ul", { className: _this._classNames.fileList }, fileListItems),
                overflowText && React.createElement("span", { className: _this._classNames.fileListOverflowText }, overflowText)));
        };
        return _this;
    }
    DocumentCardPreviewBase.prototype.render = function () {
        var _a = this.props, previewImages = _a.previewImages, styles = _a.styles, theme = _a.theme, className = _a.className;
        var style, preview;
        var isFileList = previewImages.length > 1;
        this._classNames = getClassNames(styles, {
            theme: theme,
            className: className,
            isFileList: isFileList
        });
        if (previewImages.length > 1) {
            // Render a list of files
            preview = this._renderPreviewList(previewImages);
        }
        else if (previewImages.length === 1) {
            // Render a single preview
            preview = this._renderPreviewImage(previewImages[0]);
            // Override the border color if an accent color was provided
            if (previewImages[0].accentColor) {
                style = {
                    borderBottomColor: previewImages[0].accentColor
                };
            }
        }
        return (React.createElement("div", { className: this._classNames.root, style: style }, preview));
    };
    DocumentCardPreviewBase.prototype._renderPreviewImage = function (previewImage) {
        var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit, previewIconProps = previewImage.previewIconProps, previewIconContainerClass = previewImage.previewIconContainerClass;
        if (previewIconProps) {
            return (React.createElement("div", { className: css(this._classNames.previewIcon, previewIconContainerClass), style: { width: width, height: height } },
                React.createElement(Icon, tslib_1.__assign({}, previewIconProps))));
        }
        var image = React.createElement(Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: "presentation", alt: "" });
        var icon;
        if (previewImage.iconSrc) {
            icon = React.createElement(Image, { className: this._classNames.icon, src: previewImage.iconSrc, role: "presentation", alt: "" });
        }
        return (React.createElement("div", null,
            image,
            icon));
    };
    return DocumentCardPreviewBase;
}(BaseComponent));
export { DocumentCardPreviewBase };
//# sourceMappingURL=DocumentCardPreview.base.js.map