define(["require", "exports", "tslib", "react", "@fluentui/react", "@fluentui/react/lib/Button", "@fluentui/scheme-utilities", "@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example", "@fluentui/foundation-legacy"], function (require, exports, tslib_1, React, react_1, Button_1, scheme_utilities_1, CollapsibleSection_Recursive_Example_1, foundation_legacy_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ThemingSchemesVariantExample = void 0;
    // Workaround to prevent errors on usage of ThemeProvider, without disabling all deprecation checks
    // eslint-disable-next-line deprecation/deprecation
    var ThemeProvider = foundation_legacy_1.ThemeProvider;
    var regionStyles = function (props, theme) { return ({
        root: {
            backgroundColor: theme.semanticColors.bodyBackground,
            color: theme.semanticColors.bodyText,
        },
    }); };
    var defaultTheme = react_1.getTheme(true);
    var neutralTheme = scheme_utilities_1.getNeutralVariant(defaultTheme);
    var softTheme = scheme_utilities_1.getSoftVariant(defaultTheme);
    var strongTheme = scheme_utilities_1.getStrongVariant(defaultTheme);
    var schemeThemeVariants = tslib_1.__assign(tslib_1.__assign({}, defaultTheme), { schemes: {
            default: defaultTheme,
            neutral: neutralTheme,
            soft: softTheme,
            strong: strongTheme,
        } });
    var ThemingSchemesVariantExample = /** @class */ (function (_super) {
        tslib_1.__extends(ThemingSchemesVariantExample, _super);
        function ThemingSchemesVariantExample() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.state = {
                bodyToggle: false,
                sideToggle: false,
                topToggle: false,
            };
            _this._toggleBody = function () {
                _this.setState(function (state) { return _this.setState({ bodyToggle: !state.bodyToggle }); });
            };
            _this._toggleSide = function () {
                _this.setState(function (state) { return _this.setState({ sideToggle: !state.sideToggle }); });
            };
            _this._toggleTop = function () {
                _this.setState(function (state) { return _this.setState({ topToggle: !state.topToggle }); });
            };
            return _this;
        }
        ThemingSchemesVariantExample.prototype.render = function () {
            // eslint-disable-next-line deprecation/deprecation
            return React.createElement(react_1.Customizer, { settings: { theme: schemeThemeVariants } }, this._renderSchemedComponents());
        };
        /**
         * Render various components only using scheme names (no Customizers.)
         */
        ThemingSchemesVariantExample.prototype._renderSchemedComponents = function () {
            var bodyScheme = this.state.bodyToggle ? 'soft' : 'neutral';
            var sideScheme = this.state.sideToggle ? 'neutral' : 'strong';
            var topScheme = this.state.topToggle ? 'strong' : 'soft';
            var bodyCaption = 'Scheme: ' + bodyScheme;
            var sideCaption = 'Scheme: ' + sideScheme;
            var topCaption = 'Scheme: ' + topScheme;
            var stackTokens = { childrenGap: 10 };
            // TODO: Even though this styles function is the same for all regions, it has to be provided whenever the scheme
            //        is changed to apply the new semanticColors. Is this the best way we can do this?
            return (React.createElement(react_1.Stack, { horizontal: true, tokens: stackTokens },
                React.createElement(react_1.Stack.Item, { grow: true, styles: { root: { width: '33%', maxWidth: '33%' } } },
                    React.createElement(ThemeProvider, { scheme: sideScheme },
                        React.createElement(react_1.Stack, { styles: regionStyles, tokens: stackTokens, padding: 5 },
                            React.createElement(react_1.Text, null, sideCaption),
                            React.createElement(react_1.Toggle, { offText: sideCaption, onText: sideCaption, onChange: this._toggleSide }),
                            React.createElement(CollapsibleSection_Recursive_Example_1.CollapsibleSectionRecursiveExample, null)))),
                React.createElement(react_1.Stack.Item, { grow: true, styles: { root: { height: 'auto' } } },
                    React.createElement(react_1.Stack, { grow: true, verticalFill: true },
                        React.createElement(ThemeProvider, { scheme: topScheme },
                            React.createElement(react_1.Stack, { styles: regionStyles, tokens: stackTokens, padding: 5 },
                                React.createElement(react_1.Stack, { horizontal: true, horizontalAlign: "space-between" },
                                    React.createElement(react_1.Text, null, topCaption),
                                    React.createElement(react_1.Toggle, { offText: topCaption, onText: topCaption, onChange: this._toggleTop })),
                                React.createElement(react_1.CommandBar, { items: items, overflowItems: overflowItems, farItems: farItems }))),
                        React.createElement(ThemeProvider, { scheme: bodyScheme },
                            React.createElement(react_1.Stack, { styles: regionStyles, verticalFill: true, padding: 5 },
                                React.createElement(react_1.Stack, { horizontal: true, horizontalAlign: "space-between" },
                                    React.createElement(react_1.Text, null, bodyCaption),
                                    React.createElement(react_1.Toggle, { offText: bodyCaption, onText: bodyCaption, onChange: this._toggleBody })),
                                React.createElement(ThemeProvider, { scheme: "default" },
                                    React.createElement(react_1.Stack.Item, null,
                                        React.createElement(DialogExample, { buttonText: "Default Theme" }))),
                                React.createElement(ThemeProvider, { scheme: "strong" },
                                    React.createElement(react_1.Stack.Item, null,
                                        React.createElement(DialogExample, { buttonText: "Strong Scheme" }))),
                                React.createElement(ThemeProvider, { scheme: "soft" },
                                    React.createElement(react_1.Stack.Item, null,
                                        React.createElement(DialogExample, { buttonText: "Soft Scheme" }))),
                                React.createElement(DialogExample, { buttonText: "Inherited Scheme" })))))));
        };
        return ThemingSchemesVariantExample;
    }(React.Component));
    exports.ThemingSchemesVariantExample = ThemingSchemesVariantExample;
    // eslint-disable-next-line deprecation/deprecation
    var onCommandClick = function (ev, item) { return console.log(item && (item.text || item.name)); };
    var items = [
        {
            key: 'newItem',
            name: 'New',
            iconProps: { iconName: 'Add' },
            ariaLabel: 'New. Use left and right arrow keys to navigate',
            subMenuProps: {
                items: [
                    { key: 'emailMessage', name: 'Email message', iconProps: { iconName: 'Mail' } },
                    { key: 'calendarEvent', name: 'Calendar event', iconProps: { iconName: 'Calendar' } },
                ],
            },
        },
        {
            key: 'upload',
            name: 'Upload',
            iconProps: { iconName: 'Upload' },
            href: 'https://developer.microsoft.com/en-us/fluentui',
            target: '_blank',
        },
        { key: 'share', name: 'Share', iconProps: { iconName: 'Share' }, onClick: onCommandClick },
        { key: 'download', name: 'Download', iconProps: { iconName: 'Download' }, onClick: onCommandClick },
    ];
    var overflowItems = [
        { key: 'move', name: 'Move to...', iconProps: { iconName: 'MoveToFolder' } },
        { key: 'copy', name: 'Copy to...', iconProps: { iconName: 'Copy' } },
        { key: 'rename', name: 'Rename...', iconProps: { iconName: 'Edit' } },
    ];
    var farItems = [
        { key: 'sort', name: 'Sort', ariaLabel: 'Sort', iconProps: { iconName: 'SortLines' }, onClick: onCommandClick },
        {
            key: 'tile',
            name: 'Grid view',
            ariaLabel: 'Grid view',
            iconProps: { iconName: 'Tiles' },
            iconOnly: true,
            onClick: onCommandClick,
        },
        {
            key: 'info',
            name: 'Info',
            ariaLabel: 'Info',
            iconProps: { iconName: 'Info' },
            iconOnly: true,
            onClick: onCommandClick,
        },
    ];
    var DialogExample = /** @class */ (function (_super) {
        tslib_1.__extends(DialogExample, _super);
        function DialogExample() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.state = {
                hideDialog: true,
            };
            _this._showDialog = function () { return _this.setState({ hideDialog: false }); };
            _this._closeDialog = function () { return _this.setState({ hideDialog: true }); };
            return _this;
        }
        DialogExample.prototype.render = function () {
            return (React.createElement("div", null,
                React.createElement("br", null),
                React.createElement(Button_1.DefaultButton, { secondaryText: "Opens the Sample Dialog", onClick: this._showDialog, text: this.props.buttonText }),
                React.createElement(react_1.Dialog, { hidden: this.state.hideDialog, onDismiss: this._closeDialog, dialogContentProps: {
                        type: react_1.DialogType.largeHeader,
                        title: 'All emails together',
                        subText: 'Your Inbox has changed. No longer does it include favorites, ' +
                            'it is a singular destination for your emails.',
                    }, modalProps: {
                        isBlocking: false,
                        styles: { main: { maxWidth: 450 } },
                    } },
                    React.createElement(react_1.ChoiceGroup, { defaultSelectedKey: "B", options: [
                            { key: 'A', text: 'Option A' },
                            { key: 'B', text: 'Option B' },
                            { key: 'C', text: 'Option C', disabled: true },
                        ] }),
                    React.createElement(react_1.DialogFooter, null,
                        React.createElement(Button_1.PrimaryButton, { onClick: this._closeDialog, text: "Save" }),
                        React.createElement(Button_1.DefaultButton, { onClick: this._closeDialog, text: "Cancel" })))));
        };
        return DialogExample;
    }(React.Component));
});
//# sourceMappingURL=Theming.Schemes.Variant.Example.js.map