"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChicletFooterExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_experiments_1 = require("@fluentui/react-experiments");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var Text_1 = require("@fluentui/react/lib-commonjs/Text");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var SAMPLE_URL = 'https://contoso.sharepoint.com';
var FooterComponent = /** @class */ (function (_super) {
    tslib_1.__extends(FooterComponent, _super);
    function FooterComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FooterComponent.prototype.render = function () {
        var _a = this.props, buttonProps = _a.buttonProps, activities = _a.activities;
        return _renderFooter(buttonProps, activities);
    };
    return FooterComponent;
}(React.Component));
var footerStyle = Styling_1.mergeStyles({
    display: 'flex',
    position: 'absolute',
    alignItems: 'flex-end',
    justifyContent: 'flex-start',
    height: 36,
    width: '100%',
    bottom: 0,
});
var activitiesStyle = Styling_1.mergeStyles({
    paddingLeft: 16,
    paddingBottom: 8,
    fontWeight: Styling_1.FontWeights.semibold,
});
var actionsStyle = Styling_1.mergeStyles({
    display: 'flex',
    fontSize: 16,
    marginLeft: 'auto',
});
var actionStyle = Styling_1.mergeStyles({
    cursor: 'pointer',
    width: 32,
    height: 36,
    backgroundColor: 'white',
    color: '#0078d7',
});
var ChicletFooterExample = function () {
    var footerButtonProps = [
        { iconProps: { iconName: 'More' } },
        { iconProps: { iconName: 'Save' } },
        { iconProps: { iconName: 'Share' } },
    ];
    var footer = React.createElement(FooterComponent, { buttonProps: footerButtonProps, activities: "10 Comments  16 Shares  87 Views" });
    return (React.createElement(react_experiments_1.Chiclet, { url: SAMPLE_URL, image: "https://static2.sharepointonline.com/files/fabric/assets/item-types/96/docx.svg", title: "Quarterly Results.docx", size: react_experiments_1.ChicletSize.medium, footer: footer }));
};
exports.ChicletFooterExample = ChicletFooterExample;
function _renderFooter(buttonProps, activities) {
    return (React.createElement("div", { className: footerStyle },
        React.createElement(Text_1.Text, { variant: "small", className: activitiesStyle }, activities),
        React.createElement("div", { className: actionsStyle }, buttonProps &&
            buttonProps.map(function (buttonProp, index) {
                return (React.createElement("div", { className: actionStyle, key: index },
                    React.createElement(Button_1.IconButton, tslib_1.__assign({}, buttonProp))));
            }))));
}
//# sourceMappingURL=Chiclet.Footer.Example.js.map