"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Image_1 = require("../../Image");
var Utilities_1 = require("../../Utilities");
var stylesImport = require("./DocumentCard.scss");
var styles = stylesImport;
var LIST_ITEM_COUNT = 3;
var DocumentCardPreview = (function (_super) {
    tslib_1.__extends(DocumentCardPreview, _super);
    function DocumentCardPreview() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    DocumentCardPreview.prototype.render = function () {
        var previewImages = this.props.previewImages;
        var style, preview;
        var isFileList = false;
        if (previewImages.length > 1) {
            // Render a list of files
            preview = this._renderPreviewList(previewImages);
            isFileList = true;
        }
        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: Utilities_1.css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)), style: style }, preview));
    };
    DocumentCardPreview.prototype._renderPreviewImage = function (previewImage) {
        var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit;
        var image = (React.createElement(Image_1.Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: 'presentation', alt: '' }));
        var icon;
        if (previewImage.iconSrc) {
            icon = React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-icon', styles.icon), src: previewImage.iconSrc, role: 'presentation', alt: '' });
        }
        return (React.createElement("div", null,
            image,
            icon));
    };
    DocumentCardPreview.prototype._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_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon), src: file.iconSrc, role: 'presentation', alt: '', width: '16px', height: '16px' }),
            React.createElement("a", { href: file.url }, file.name))); });
        return (React.createElement("div", null,
            React.createElement("ul", { className: Utilities_1.css('ms-DocumentCardPreview-fileList', styles.fileList) }, fileListItems),
            overflowText &&
                React.createElement("span", { className: Utilities_1.css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }, overflowText)));
    };
    return DocumentCardPreview;
}(Utilities_1.BaseComponent));
tslib_1.__decorate([
    Utilities_1.autobind
], DocumentCardPreview.prototype, "_renderPreviewList", null);
exports.DocumentCardPreview = DocumentCardPreview;

//# sourceMappingURL=DocumentCardPreview.js.map
