import { __assign, __extends } from "tslib";
import * as React from 'react';
import { Chiclet, ChicletSize } from '@uifabric/experiments/lib/Chiclet';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
var SAMPLE_URL = 'https://contoso.sharepoint.com';
var footerStyle = mergeStyles({
    display: 'flex',
});
var activitiesStyle = mergeStyles({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    width: 190,
    fontSize: 12,
    lineHeight: 1.83,
    letterSpacing: 'normal',
});
var attachStyle = mergeStyles({
    height: '24px',
    width: '16px',
    fontSize: '16px',
    marginTop: '6px',
    marginLeft: '6px',
    backgroundColor: 'white',
    color: '#0078d7',
});
var sizeStyle = mergeStyles({
    width: 34,
    alignSelf: 'center',
    lineHeight: 1.83,
    letterSpacing: 'normal',
});
export var ChicletXsmallFooterExample = function () {
    var footerButtonProps = [
        { iconProps: { iconName: 'More' } },
        { iconProps: { iconName: 'CloudUpload' } },
    ];
    var attachIconProp = { iconName: 'Attach' };
    var footer = React.createElement(FooterComponent, { buttonProps: footerButtonProps, attachProps: attachIconProp });
    return (React.createElement(Chiclet, { url: SAMPLE_URL, title: "Quarterly Results.docx", image: "https://static2.sharepointonline.com/files/fabric/assets/item-types/48/docx.svg", itemType: "docx", size: ChicletSize.xSmall, footer: footer }));
};
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, attachProps = _a.attachProps;
        return _renderFooter(buttonProps, attachProps);
    };
    return FooterComponent;
}(React.Component));
function _renderFooter(buttonProps, attachProps) {
    return (React.createElement("div", { className: footerStyle },
        React.createElement(Icon, __assign({}, attachProps, { className: attachStyle })),
        React.createElement(Text, { variant: "small", className: sizeStyle }, '4MB'),
        React.createElement("div", { className: activitiesStyle }, buttonProps &&
            buttonProps.map(function (buttonProp, index) {
                return (React.createElement("div", { key: index },
                    React.createElement(IconButton, __assign({}, buttonProp))));
            }))));
}
//# sourceMappingURL=Chiclet.Xsmall.Footer.Example.js.map