import { __assign, __extends, __rest } from "tslib";
import * as React from 'react';
import { FolderCover, getFolderCoverLayout, renderFolderCoverWithLayout, SharedSignal, initializeFolderCovers, } from '@uifabric/experiments';
import { fitContentToBounds } from '@uifabric/experiments/lib/Utilities';
initializeFolderCovers();
var FolderCoverWithImage = function (props) {
    var originalImageSize = props.originalImageSize, folderCoverProps = __rest(props, ["originalImageSize"]);
    var folderCover = React.createElement(FolderCover, __assign({}, folderCoverProps));
    var contentSize = getFolderCoverLayout(folderCover).contentSize;
    var imageSize = fitContentToBounds({
        contentSize: originalImageSize,
        boundsSize: contentSize,
        mode: 'cover',
    });
    return renderFolderCoverWithLayout(folderCover, {
        children: React.createElement("img", { src: "//placehold.it/" + Math.round(imageSize.width) + "x" + Math.round(imageSize.height) }),
    });
};
var FolderCoverBasicExample = /** @class */ (function (_super) {
    __extends(FolderCoverBasicExample, _super);
    function FolderCoverBasicExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FolderCoverBasicExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement("h3", null, "Large Default Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "large", metadata: 20, signal: React.createElement(SharedSignal, null) }),
            React.createElement("h3", null, "Fluent Large Default Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "large", metadata: 20, signal: React.createElement(SharedSignal, null) }),
            React.createElement("h3", null, "Fluent Large Default Cover -- item count only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "large", metadata: 20 }),
            React.createElement("h3", null, "Large Default Cover -- signal icon only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "large", signal: React.createElement(SharedSignal, null) }),
            React.createElement("h3", null, "Small Default Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "small", metadata: 15 }),
            React.createElement("h3", null, "Fluent Small Default Cover - metadata only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "small", metadata: 15 }),
            React.createElement("h3", null, "Large Media Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "large", folderCoverType: "media", metadata: 20, signal: React.createElement(SharedSignal, null) }),
            React.createElement("h3", null, "Small Media Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "small", folderCoverType: "media", metadata: 15 }),
            React.createElement("h3", null, "Small Media Cover -- signal icon only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "small", folderCoverType: "media", signal: React.createElement(SharedSignal, null) }),
            React.createElement("h3", null, "Shared Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "small", folderCoverType: "media", metadata: 15, signal: React.createElement(SharedSignal, null) }),
            React.createElement("h3", null, "Large Linked Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "large", folderCoverType: "linked", metadata: 20, signal: React.createElement(SharedSignal, null) }),
            React.createElement("h3", null, "Small Linked Cover"),
            React.createElement(FolderCoverWithImage, { isFluent: false, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "small", folderCoverType: "linked", metadata: 15 }),
            React.createElement("h3", null, "Small Linked Cover -- signal icon only"),
            React.createElement(FolderCoverWithImage, { isFluent: true, originalImageSize: {
                    width: 200,
                    height: 150,
                }, folderCoverSize: "small", folderCoverType: "linked", signal: React.createElement(SharedSignal, null) })));
    };
    return FolderCoverBasicExample;
}(React.Component));
export { FolderCoverBasicExample };
//# sourceMappingURL=FolderCover.Basic.Example.js.map