import { __assign, __extends } from "tslib";
import * as React from 'react';
import { ChoiceGroup, CommandBar, Customizer, Dialog, DialogFooter, DialogType, getTheme, Stack, Toggle, Text, } from '@fluentui/react';
import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button';
import { getNeutralVariant, getSoftVariant, getStrongVariant } from '@fluentui/scheme-utilities';
import { CollapsibleSectionRecursiveExample } from '@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example';
import { ThemeProvider as DeprecatedThemeProvider } from '@fluentui/foundation-legacy';
// Workaround to prevent errors on usage of ThemeProvider, without disabling all deprecation checks
// eslint-disable-next-line deprecation/deprecation
var ThemeProvider = DeprecatedThemeProvider;
var regionStyles = function (props, theme) { return ({
    root: {
        backgroundColor: theme.semanticColors.bodyBackground,
        color: theme.semanticColors.bodyText,
    },
}); };
var defaultTheme = getTheme(true);
var neutralTheme = getNeutralVariant(defaultTheme);
var softTheme = getSoftVariant(defaultTheme);
var strongTheme = getStrongVariant(defaultTheme);
var schemeThemeVariants = __assign(__assign({}, defaultTheme), { schemes: {
        default: defaultTheme,
        neutral: neutralTheme,
        soft: softTheme,
        strong: strongTheme,
    } });
var ThemingSchemesVariantExample = /** @class */ (function (_super) {
    __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(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(Stack, { horizontal: true, tokens: stackTokens },
            React.createElement(Stack.Item, { grow: true, styles: { root: { width: '33%', maxWidth: '33%' } } },
                React.createElement(ThemeProvider, { scheme: sideScheme },
                    React.createElement(Stack, { styles: regionStyles, tokens: stackTokens, padding: 5 },
                        React.createElement(Text, null, sideCaption),
                        React.createElement(Toggle, { offText: sideCaption, onText: sideCaption, onChange: this._toggleSide }),
                        React.createElement(CollapsibleSectionRecursiveExample, null)))),
            React.createElement(Stack.Item, { grow: true, styles: { root: { height: 'auto' } } },
                React.createElement(Stack, { grow: true, verticalFill: true },
                    React.createElement(ThemeProvider, { scheme: topScheme },
                        React.createElement(Stack, { styles: regionStyles, tokens: stackTokens, padding: 5 },
                            React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
                                React.createElement(Text, null, topCaption),
                                React.createElement(Toggle, { offText: topCaption, onText: topCaption, onChange: this._toggleTop })),
                            React.createElement(CommandBar, { items: items, overflowItems: overflowItems, farItems: farItems }))),
                    React.createElement(ThemeProvider, { scheme: bodyScheme },
                        React.createElement(Stack, { styles: regionStyles, verticalFill: true, padding: 5 },
                            React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
                                React.createElement(Text, null, bodyCaption),
                                React.createElement(Toggle, { offText: bodyCaption, onText: bodyCaption, onChange: this._toggleBody })),
                            React.createElement(ThemeProvider, { scheme: "default" },
                                React.createElement(Stack.Item, null,
                                    React.createElement(DialogExample, { buttonText: "Default Theme" }))),
                            React.createElement(ThemeProvider, { scheme: "strong" },
                                React.createElement(Stack.Item, null,
                                    React.createElement(DialogExample, { buttonText: "Strong Scheme" }))),
                            React.createElement(ThemeProvider, { scheme: "soft" },
                                React.createElement(Stack.Item, null,
                                    React.createElement(DialogExample, { buttonText: "Soft Scheme" }))),
                            React.createElement(DialogExample, { buttonText: "Inherited Scheme" })))))));
    };
    return ThemingSchemesVariantExample;
}(React.Component));
export { 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) {
    __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(DefaultButton, { secondaryText: "Opens the Sample Dialog", onClick: this._showDialog, text: this.props.buttonText }),
            React.createElement(Dialog, { hidden: this.state.hideDialog, onDismiss: this._closeDialog, dialogContentProps: {
                    type: 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(ChoiceGroup, { defaultSelectedKey: "B", options: [
                        { key: 'A', text: 'Option A' },
                        { key: 'B', text: 'Option B' },
                        { key: 'C', text: 'Option C', disabled: true },
                    ] }),
                React.createElement(DialogFooter, null,
                    React.createElement(PrimaryButton, { onClick: this._closeDialog, text: "Save" }),
                    React.createElement(DefaultButton, { onClick: this._closeDialog, text: "Cancel" })))));
    };
    return DialogExample;
}(React.Component));
//# sourceMappingURL=Theming.Schemes.Variant.Example.js.map