"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TileMediaExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("@fluentui/react");
var react_experiments_1 = require("@fluentui/react-experiments");
var example_data_1 = require("@fluentui/example-data");
var TileExampleStylesModule = require("./Tile.Example.scss");
var ITEMS = [
    {
        name: React.createElement(React.Fragment, null, example_data_1.lorem(2)),
        activity: (React.createElement(React.Fragment, null,
            React.createElement("span", { className: TileExampleStylesModule.activityBlock }, "267\u205F\u00D7\u205F200\u2002\u00B7\u20023.14\u00A0MB"),
            React.createElement(react_experiments_1.SignalField, { before: [
                    React.createElement(react_experiments_1.Signal, { key: 0 },
                        React.createElement(react_1.Icon, { iconName: "play" })),
                    React.createElement(react_experiments_1.MentionSignal, { key: 1 }),
                ] }, example_data_1.lorem(6)))),
    },
    {
        name: React.createElement(React.Fragment, null, example_data_1.lorem(2)),
        activity: (React.createElement(React.Fragment, null,
            React.createElement("span", { className: TileExampleStylesModule.activityBlock }, "200\u205F\u00D7\u205F267\u2002\u00B7\u20023.14\u00A0MB"),
            React.createElement(react_experiments_1.SignalField, { before: [
                    React.createElement(react_experiments_1.Signal, { key: 0 },
                        React.createElement(react_1.Icon, { iconName: "play" })),
                    React.createElement(react_experiments_1.SharedSignal, { key: 1 }),
                ] }, example_data_1.lorem(6)))),
    },
    {
        name: React.createElement(React.Fragment, null, example_data_1.lorem(2)),
        activity: (React.createElement(React.Fragment, null,
            React.createElement("span", { className: TileExampleStylesModule.activityBlock }, "200\u205F\u00D7\u205F200\u2002\u00B7\u20023.14\u00A0MB"),
            React.createElement(react_experiments_1.SignalField, { before: [
                    React.createElement(react_experiments_1.Signal, { key: 0 },
                        React.createElement(react_1.Icon, { iconName: "play" })),
                    React.createElement(react_experiments_1.MentionSignal, { key: 1 }),
                ] }, example_data_1.lorem(6)))),
    },
    {
        name: React.createElement(React.Fragment, null, example_data_1.lorem(2)),
        activity: (React.createElement(React.Fragment, null,
            React.createElement("span", { className: TileExampleStylesModule.activityBlock }, "180\u205F\u00D7\u205F180\u2002\u00B7\u20023.14\u00A0MB"),
            React.createElement(react_experiments_1.SignalField, { before: [
                    React.createElement(react_experiments_1.Signal, { key: 0 },
                        React.createElement(react_1.Icon, { iconName: "play" })),
                    React.createElement(react_experiments_1.SharedSignal, { key: 1 }),
                ] }, example_data_1.lorem(6)))),
    },
];
var TileExampleStyles = TileExampleStylesModule;
var ImageTile = function (props) {
    var tile = (React.createElement(react_experiments_1.Tile, { contentSize: props.tileSize, itemName: React.createElement(react_experiments_1.SignalField, { before: React.createElement(react_experiments_1.NewSignal, null) }, props.item.name), itemActivity: props.item.activity, background: React.createElement("span", null) // Placeholder content
        , hideBackground: !props.showBackground, showBackgroundFrame: true, nameplateOnlyOnHover: props.nameplateOnlyOnHover, href: props.linkHref, target: props.linkTarget }));
    var backgroundSize = react_experiments_1.getTileLayout(tile).backgroundSize;
    var imageSize = react_1.fitContentToBounds({
        contentSize: props.originalImageSize,
        boundsSize: backgroundSize || { width: 0, height: 0 },
        mode: 'cover',
    });
    return (React.createElement("div", { className: react_1.css(TileExampleStyles.tile), style: {
            width: props.tileSize.width + "px",
            height: props.tileSize.height + "px",
        } }, react_experiments_1.renderTileWithLayout(tile, {
        background: (React.createElement("img", { className: react_1.css(TileExampleStyles.tileImage), src: "//via.placeholder.com/" + Math.round(imageSize.width) + "x" + Math.round(imageSize.height) })),
    })));
};
var TileMediaExample = /** @class */ (function (_super) {
    tslib_1.__extends(TileMediaExample, _super);
    function TileMediaExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onImagesLoadedChanged = function (event, checked) {
            _this.setState({
                imagesLoaded: checked,
            });
        };
        _this._onNameplateOnlyOnHoverChanged = function (event, checked) {
            _this.setState({
                nameplateOnlyOnHover: checked,
            });
        };
        _this._onGenerateLinksChanged = function (event, checked) {
            _this.setState({
                generateLinks: checked,
            });
        };
        _this._onLinkInNewTabChanged = function (event, checked) {
            _this.setState({
                linkInNewTab: checked,
            });
        };
        _this.state = {
            imagesLoaded: true,
            nameplateOnlyOnHover: false,
            generateLinks: false,
            linkInNewTab: false,
        };
        return _this;
    }
    TileMediaExample.prototype.render = function () {
        var _a = this.state, imagesLoaded = _a.imagesLoaded, nameplateOnlyOnHover = _a.nameplateOnlyOnHover, generateLinks = _a.generateLinks, linkInNewTab = _a.linkInNewTab;
        var exampleUrl = 'http://www.contoso.com/';
        var linkHref = generateLinks ? exampleUrl : undefined;
        var linkTarget = generateLinks && linkInNewTab ? '_blank' : undefined;
        return (React.createElement("div", null,
            React.createElement(react_1.Checkbox, { label: "Show images as loaded", checked: imagesLoaded, onChange: this._onImagesLoadedChanged }),
            React.createElement(react_1.Checkbox, { label: "Show nameplate only on hover", checked: nameplateOnlyOnHover, onChange: this._onNameplateOnlyOnHoverChanged }),
            React.createElement(react_1.Checkbox, { label: "Generate links", checked: generateLinks, onChange: this._onGenerateLinksChanged }),
            React.createElement(react_1.Checkbox, { label: "Open links in new tab", disabled: !generateLinks, checked: linkInNewTab, onChange: this._onLinkInNewTabChanged }),
            React.createElement("h3", null, "Landscape"),
            React.createElement(ImageTile, { tileSize: {
                    width: 250,
                    height: 200,
                }, item: ITEMS[0], originalImageSize: {
                    width: 400,
                    height: 300,
                }, showBackground: imagesLoaded, nameplateOnlyOnHover: nameplateOnlyOnHover, linkHref: linkHref, linkTarget: linkTarget }),
            React.createElement("h3", null, "Portrait"),
            React.createElement(ImageTile, { tileSize: {
                    width: 200,
                    height: 250,
                }, item: ITEMS[1], originalImageSize: {
                    width: 300,
                    height: 400,
                }, showBackground: imagesLoaded, nameplateOnlyOnHover: nameplateOnlyOnHover, linkHref: linkHref, linkTarget: linkTarget }),
            React.createElement("h3", null, "Small Image"),
            React.createElement(ImageTile, { tileSize: {
                    width: 200,
                    height: 200,
                }, item: ITEMS[2], originalImageSize: {
                    width: 16,
                    height: 16,
                }, showBackground: imagesLoaded, nameplateOnlyOnHover: nameplateOnlyOnHover, linkHref: linkHref, linkTarget: linkTarget }),
            React.createElement("h3", null, "No preview"),
            React.createElement("div", { className: react_1.css(TileExampleStyles.tile, TileExampleStyles.largeTile) },
                React.createElement(react_experiments_1.Tile, { itemName: React.createElement(react_experiments_1.SignalField, { before: React.createElement(react_experiments_1.NewSignal, null) }, ITEMS[3].name), itemActivity: ITEMS[3].activity, foreground: React.createElement(react_1.Icon, { iconName: "play", style: { margin: '11px', fontSize: '40px' } }), showBackgroundFrame: true, nameplateOnlyOnHover: this.state.nameplateOnlyOnHover, href: linkHref, target: linkTarget }))));
    };
    return TileMediaExample;
}(React.Component));
exports.TileMediaExample = TileMediaExample;
//# sourceMappingURL=Tile.Media.Example.js.map