import { __extends } from "tslib";
import * as React from 'react';
import { SignalField, YouCheckedOutSignal, MalwareDetectedSignal, BlockedSignal, MissingMetadataSignal, WarningSignal, AwaitingApprovalSignal, TrendingSignal, SomeoneCheckedOutSignal, NewSignal, LiveEditSignal, MentionSignal, CommentsSignal, UnseenReplySignal, UnseenEditSignal, ReadOnlySignal, SharedSignal, EmailedSignal, RecordSignal, NeedsRepublishingSignal, ItemScheduledSignal, DesktopSignal, DocumentsSignal, PicturesSignal, } from '@uifabric/experiments';
import { Checkbox, ChoiceGroup, css } from 'office-ui-fabric-react';
import { lorem } from '@uifabric/example-data';
import * as SignalStylesModule from '@uifabric/experiments/lib/components/signals/Signal.scss';
import * as SignalsExampleStylesModule from './Signals.Example.scss';
var SignalStyles = SignalStylesModule;
var SignalsExampleStyles = SignalsExampleStylesModule;
var SignalExample = function (props) {
    var _a = props.text, text = _a === void 0 ? lorem(4) : _a;
    return (React.createElement("div", null,
        React.createElement("h3", null, props.name),
        React.createElement(SignalField, { before: props.signal }, text)));
};
var SignalsBasicExample = /** @class */ (function (_super) {
    __extends(SignalsBasicExample, _super);
    function SignalsBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onFontSizeChoiceChanged = function (option) {
            _this.setState({
                fontSize: option.key,
            });
        };
        _this._onIsDarkChanged = function (ev, checked) {
            _this.setState({
                isDark: checked,
            });
        };
        _this.state = {
            fontSize: 'small',
            isDark: false,
        };
        return _this;
    }
    SignalsBasicExample.prototype.render = function () {
        var _a;
        var _b = this.state, fontSize = _b.fontSize, isDark = _b.isDark;
        return (React.createElement("div", null,
            React.createElement("p", null,
                React.createElement(ChoiceGroup, { label: "Font size", defaultSelectedKey: fontSize, onChanged: this._onFontSizeChoiceChanged, options: [
                        { key: 'small', text: 'Small' },
                        { key: 'medium', text: 'Medium' },
                        { key: 'large', text: 'Large' },
                    ] })),
            React.createElement("p", null,
                React.createElement(Checkbox, { label: "Dark?", defaultChecked: isDark, onChange: this._onIsDarkChanged })),
            React.createElement("div", { className: css(SignalsExampleStyles.example, (_a = {},
                    _a[SignalsExampleStyles.small] = fontSize === 'small',
                    _a[SignalsExampleStyles.medium] = fontSize === 'medium',
                    _a[SignalsExampleStyles.large] = fontSize === 'large',
                    _a[SignalsExampleStyles.dark + " " + SignalStyles.dark] = isDark,
                    _a)) },
                React.createElement(SignalExample, { name: "You checked out", signal: React.createElement(YouCheckedOutSignal, null) }),
                React.createElement(SignalExample, { name: "Malware detected", signal: React.createElement(MalwareDetectedSignal, null) }),
                React.createElement(SignalExample, { name: "Blocked", signal: React.createElement(BlockedSignal, null) }),
                React.createElement(SignalExample, { name: "Missing metadata", signal: React.createElement(MissingMetadataSignal, null) }),
                React.createElement(SignalExample, { name: "Warning", signal: React.createElement(WarningSignal, null) }),
                React.createElement(SignalExample, { name: "Awaiting approval", signal: React.createElement(AwaitingApprovalSignal, null) }),
                React.createElement(SignalExample, { name: "Trending", signal: React.createElement(TrendingSignal, null) }),
                React.createElement(SignalExample, { name: "Someone checked out", signal: React.createElement(SomeoneCheckedOutSignal, null) }),
                React.createElement(SignalExample, { name: "New", signal: React.createElement(NewSignal, null) }),
                React.createElement(SignalExample, { name: "New (positioning)", signal: React.createElement(NewSignal, null), text: "O" }),
                React.createElement(SignalExample, { name: "Live edit", signal: React.createElement(LiveEditSignal, null) }),
                React.createElement(SignalExample, { name: "Mention", signal: React.createElement(MentionSignal, null) }),
                React.createElement(SignalExample, { name: "Comments", signal: React.createElement(CommentsSignal, null) }),
                React.createElement(SignalExample, { name: "Comments (count)", signal: React.createElement(CommentsSignal, null, "2") }),
                React.createElement(SignalExample, { name: "Unseen reply", signal: React.createElement(UnseenReplySignal, null) }),
                React.createElement(SignalExample, { name: "Unseen edit", signal: React.createElement(UnseenEditSignal, null) }),
                React.createElement(SignalExample, { name: "Emailed", signal: React.createElement(EmailedSignal, null) }),
                React.createElement(SignalExample, { name: "Record", signal: React.createElement(RecordSignal, null) }),
                React.createElement(SignalExample, { name: "Read-only", signal: React.createElement(ReadOnlySignal, null) }),
                React.createElement(SignalExample, { name: "Shared", signal: React.createElement(SharedSignal, null) }),
                React.createElement(SignalExample, { name: "Needs Republishing", signal: React.createElement(NeedsRepublishingSignal, null) }),
                React.createElement(SignalExample, { name: "Page Scheduled", signal: React.createElement(ItemScheduledSignal, null) }),
                React.createElement(SignalExample, { name: "Special Folder (Desktop)", signal: React.createElement(DesktopSignal, null) }),
                React.createElement(SignalExample, { name: "Special Folder (Documents)", signal: React.createElement(DocumentsSignal, null) }),
                React.createElement(SignalExample, { name: "Special Folder (Pictures)", signal: React.createElement(PicturesSignal, null) }))));
    };
    return SignalsBasicExample;
}(React.Component));
export { SignalsBasicExample };
//# sourceMappingURL=Signals.Basic.Example.js.map