import { __assign, __extends } from "tslib";
import * as React from 'react';
import { Chiclet, ChicletSize } from '@uifabric/experiments';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { mergeStyles, FontWeights } from 'office-ui-fabric-react/lib/Styling';
var SAMPLE_URL = 'https://contoso.sharepoint.com';
var FooterComponent = /** @class */ (function (_super) {
    __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 = mergeStyles({
    display: 'flex',
    position: 'absolute',
    alignItems: 'flex-end',
    justifyContent: 'flex-start',
    height: 36,
    width: '100%',
    bottom: 0,
});
var activitiesStyle = mergeStyles({
    paddingLeft: 16,
    paddingBottom: 8,
    fontWeight: FontWeights.semibold,
});
var actionsStyle = mergeStyles({
    display: 'flex',
    fontSize: 16,
    marginLeft: 'auto',
});
var actionStyle = mergeStyles({
    cursor: 'pointer',
    width: 32,
    height: 36,
    backgroundColor: 'white',
    color: '#0078d7',
});
export 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(Chiclet, { url: SAMPLE_URL, image: "https://static2.sharepointonline.com/files/fabric/assets/item-types/96/docx.svg", title: "Quarterly Results.docx", size: ChicletSize.medium, footer: footer }));
};
function _renderFooter(buttonProps, activities) {
    return (React.createElement("div", { className: footerStyle },
        React.createElement(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(IconButton, __assign({}, buttonProp))));
            }))));
}
//# sourceMappingURL=Chiclet.Footer.Example.js.map