"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TileFolderExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var Checkbox_1 = require("@fluentui/react/lib-commonjs/Checkbox");
var react_experiments_1 = require("@fluentui/react-experiments");
var FolderCover_1 = require("@fluentui/react-experiments/lib-commonjs/FolderCover");
var example_data_1 = require("@fluentui/example-data");
var Utilities_1 = require("@fluentui/react-experiments/lib-commonjs/Utilities");
var TileExampleStylesModule = require("./Tile.Example.scss");
var TileExampleStyles = TileExampleStylesModule;
var ITEMS = [
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
        childCount: 4,
    },
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
    },
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
        isShared: true,
        childCount: 4,
    },
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
        childCount: 4,
    },
    {
        name: example_data_1.lorem(2),
        activity: example_data_1.lorem(6),
        childCount: 4,
    },
];
var FolderTileWithThumbnail = function (props) {
    var _a;
    var folderCover = (React.createElement(FolderCover_1.FolderCover, { folderCoverSize: props.size, folderCoverType: props.folderCoverType, metadata: props.item.childCount, signal: props.item.isShared ? React.createElement(react_experiments_1.SharedSignal, null) : null }));
    var contentSize = FolderCover_1.getFolderCoverLayout(folderCover).contentSize;
    var imageSize = props.originalImageSize
        ? Utilities_1.fitContentToBounds({
            contentSize: props.originalImageSize,
            boundsSize: contentSize,
            mode: 'contain',
        })
        : undefined;
    return (React.createElement("div", { className: Utilities_1.css(TileExampleStyles.tile, (_a = {},
            _a[TileExampleStyles.largeTile] = props.size === 'large',
            _a[TileExampleStyles.smallTile] = props.size === 'small',
            _a)) },
        React.createElement(react_experiments_1.Tile, { tileSize: props.size, itemName: React.createElement(react_experiments_1.SignalField, { before: React.createElement(react_experiments_1.NewSignal, null) }, props.item.name), itemActivity: React.createElement(react_experiments_1.SignalField, { before: React.createElement(react_experiments_1.CommentsSignal, null, '12') }, props.item.activity), foreground: React.createElement("span", { className: Utilities_1.css(TileExampleStylesModule.tileFolder) }, FolderCover_1.renderFolderCoverWithLayout(folderCover, {
                children: imageSize ? (React.createElement("img", { src: "//via.placeholder.com/" + Math.round(imageSize.width) + "x" + Math.round(imageSize.height), className: Utilities_1.css(TileExampleStyles.tileImage) })) : null,
            })) })));
};
var TileFolderExample = /** @class */ (function (_super) {
    tslib_1.__extends(TileFolderExample, _super);
    function TileFolderExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onIsLargeChanged = function (event, checked) {
            _this.setState({
                size: checked ? 'large' : 'small',
            });
        };
        _this.state = {
            size: 'large',
        };
        return _this;
    }
    TileFolderExample.prototype.render = function () {
        var size = this.state.size;
        return (React.createElement("div", null,
            React.createElement(Checkbox_1.Checkbox, { label: "Use large tiles", checked: size === 'large', onChange: this._onIsLargeChanged }),
            React.createElement("h3", null, "Folder"),
            React.createElement(FolderTileWithThumbnail, { originalImageSize: {
                    width: 400,
                    height: 300,
                }, item: ITEMS[0], size: size }),
            React.createElement(FolderTileWithThumbnail, { item: ITEMS[1], folderCoverType: "media", size: size }),
            React.createElement(FolderTileWithThumbnail, { originalImageSize: {
                    width: 300,
                    height: 400,
                }, item: ITEMS[2], folderCoverType: "media", size: size }),
            React.createElement(FolderTileWithThumbnail, { originalImageSize: {
                    width: 40,
                    height: 40,
                }, item: ITEMS[3], folderCoverType: "media", size: size }),
            React.createElement(FolderTileWithThumbnail, { originalImageSize: {
                    width: 16,
                    height: 16,
                }, item: ITEMS[4], folderCoverType: "media", size: size })));
    };
    return TileFolderExample;
}(React.Component));
exports.TileFolderExample = TileFolderExample;
//# sourceMappingURL=Tile.Folder.Example.js.map