"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var experiments_1 = require("@uifabric/experiments");
var example_data_1 = require("@uifabric/example-data");
var TileExampleStylesModule = require("./Tile.Example.scss");
var TileExampleStyles = TileExampleStylesModule;
var ITEMS = [
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
    },
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
    },
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
    },
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
    },
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
    },
];
var DocumentTileWithThumbnail = function (props) {
    var tile = (React.createElement(experiments_1.Tile, { contentSize: {
            width: 176,
            height: 171,
        }, itemName: React.createElement(experiments_1.SignalField, { before: React.createElement(experiments_1.TrendingSignal, null) }, props.item.name), itemActivity: React.createElement(experiments_1.SignalField, { before: React.createElement(experiments_1.CommentsSignal, null, '12') }, props.item.activity), foreground: React.createElement("span", null), hideForeground: !props.showForeground, showForegroundFrame: true }));
    var _a = experiments_1.getTileLayout(tile).foregroundSize, foregroundSize = _a === void 0 ? { width: 0, height: 0 } : _a;
    var imageSize = office_ui_fabric_react_1.fitContentToBounds({
        contentSize: props.originalImageSize,
        boundsSize: foregroundSize,
        mode: 'contain',
    });
    return (React.createElement("div", { className: office_ui_fabric_react_1.css(TileExampleStyles.tile, TileExampleStyles.largeTile) }, experiments_1.renderTileWithLayout(tile, {
        foreground: (React.createElement("img", { src: "//placehold.it/" + Math.round(imageSize.width) + "x" + Math.round(imageSize.height), className: office_ui_fabric_react_1.css(TileExampleStyles.tileImage) })),
    })));
};
var TileDocumentExample = /** @class */ (function (_super) {
    tslib_1.__extends(TileDocumentExample, _super);
    function TileDocumentExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onImagesLoadedChanged = function (event, checked) {
            _this.setState({
                imagesLoaded: checked,
            });
        };
        _this.state = {
            imagesLoaded: true,
        };
        return _this;
    }
    TileDocumentExample.prototype.render = function () {
        var imagesLoaded = this.state.imagesLoaded;
        return (React.createElement("div", null,
            React.createElement(office_ui_fabric_react_1.Checkbox, { label: "Show images as loaded", checked: imagesLoaded, onChange: this._onImagesLoadedChanged }),
            React.createElement("h3", null, "Document thumbnail"),
            React.createElement(DocumentTileWithThumbnail, { originalImageSize: {
                    width: 40,
                    height: 40,
                }, showForeground: imagesLoaded, item: ITEMS[0] }),
            React.createElement(DocumentTileWithThumbnail, { originalImageSize: {
                    width: 200,
                    height: 150,
                }, showForeground: imagesLoaded, item: ITEMS[1] }),
            React.createElement(DocumentTileWithThumbnail, { originalImageSize: {
                    width: 150,
                    height: 200,
                }, showForeground: imagesLoaded, item: ITEMS[2] }),
            React.createElement(DocumentTileWithThumbnail, { originalImageSize: {
                    width: 16,
                    height: 16,
                }, showForeground: imagesLoaded, item: ITEMS[3] }),
            React.createElement("h3", null, "Document icon"),
            React.createElement("div", { className: office_ui_fabric_react_1.css(TileExampleStyles.tile, TileExampleStyles.largeTile) },
                React.createElement(experiments_1.Tile, { itemName: React.createElement(experiments_1.SignalField, { before: React.createElement(experiments_1.NewSignal, null) }, ITEMS[3].name), itemActivity: React.createElement(experiments_1.SignalField, { before: React.createElement(experiments_1.SharedSignal, null) }, ITEMS[3].activity), foreground: React.createElement("img", { src: "https://static2.sharepointonline.com/files/fabric/assets/item-types/64/docx.svg", style: {
                            display: 'block',
                            width: '64px',
                            height: '64px',
                            margin: '16px',
                        } }), showForegroundFrame: true }))));
    };
    return TileDocumentExample;
}(React.Component));
exports.TileDocumentExample = TileDocumentExample;
//# sourceMappingURL=Tile.Document.Example.js.map