import { __assign, __extends } from "tslib";
import * as React from 'react';
import { ChoiceGroup, CommandBar, createTheme, Customizer, DefaultButton, Dialog, DialogFooter, DialogType, getTheme, PrimaryButton, Stack, Toggle, Text, } from 'office-ui-fabric-react';
import { CollapsibleSectionRecursiveExample } from '@fluentui/examples/lib/experiments/CollapsibleSection/CollapsibleSection.Recursive.Example';
import { ThemeProvider } from '@uifabric/foundation';
var regionStyles = function (props, theme) { return ({
    root: {
        backgroundColor: theme.semanticColors.bodyBackground,
        color: theme.semanticColors.bodyText,
    },
}); };
var invertedPrimaryPalette = {
    themePrimary: '#ffffff',
    themeLighterAlt: '#767676',
    themeLighter: '#a6a6a6',
    themeLight: '#c8c8c8',
    themeTertiary: '#d0d0d0',
    themeSecondary: '#dadada',
    themeDarkAlt: '#eaeaea',
    themeDark: '#f4f4f4',
    themeDarker: '#f8f8f8',
    neutralLighterAlt: '#097dd6',
    neutralLighter: '#1282d7',
    neutralLight: '#2089da',
    neutralQuaternaryAlt: '#288edc',
    neutralQuaternary: '#3092dd',
    neutralTertiaryAlt: '#4fa3e3',
    neutralTertiary: '#c8c8c8',
    neutralSecondary: '#d0d0d0',
    neutralPrimaryAlt: '#dadada',
    neutralPrimary: '#ffffff',
    neutralDark: '#f4f4f4',
    black: '#f8f8f8',
    white: '#0078d4',
    // TODO: not generated by ThemeGeneratorPage:
    blackTranslucent40: 'rgba(0,0,0,.4)',
    neutralSecondaryAlt: '#767676',
    accent: '#0078d4',
    whiteTranslucent40: 'rgba(255,255,255,.4)',
    yellowDark: '#d29200',
    yellow: '#ffb900',
    yellowLight: '#fff100',
    orange: '#d83b01',
    orangeLight: '#ea4300',
    orangeLighter: '#ff8c00',
    redDark: '#a80000',
    red: '#e81123',
    magentaDark: '#5c005c',
    magenta: '#b4009e',
    magentaLight: '#e3008c',
    purpleDark: '#32145a',
    purple: '#5c2d91',
    purpleLight: '#b4a0ff',
    blueDark: '#002050',
    blueMid: '#00188f',
    blue: '#0078d4',
    blueLight: '#00bcf2',
    tealDark: '#004b50',
    teal: '#008272',
    tealLight: '#00b294',
    greenDark: '#004b1c',
    green: '#107c10',
    greenLight: '#bad80a',
};
var invertedDefaultPalette = {
    themePrimary: '#ffffff',
    themeLighterAlt: '#767676',
    themeLighter: '#a6a6a6',
    themeLight: '#c8c8c8',
    themeTertiary: '#d0d0d0',
    themeSecondary: '#dadada',
    themeDarkAlt: '#eaeaea',
    themeDark: '#f4f4f4',
    themeDarker: '#f8f8f8',
    neutralLighterAlt: '#0b0b0b',
    neutralLighter: '#151515',
    neutralLight: '#252525',
    neutralQuaternaryAlt: '#2f2f2f',
    neutralQuaternary: '#373737',
    neutralTertiaryAlt: '#595959',
    neutralTertiary: '#c8c8c8',
    neutralSecondary: '#d0d0d0',
    neutralPrimaryAlt: '#dadada',
    neutralPrimary: '#ffffff',
    neutralDark: '#f4f4f4',
    black: '#f8f8f8',
    white: '#000000',
    blackTranslucent40: 'rgba(0,0,0,.4)',
    neutralSecondaryAlt: '#767676',
    accent: '#0078d4',
    whiteTranslucent40: 'rgba(255,255,255,.4)',
    yellowDark: '#d29200',
    yellow: '#ffb900',
    yellowLight: '#fff100',
    orange: '#d83b01',
    orangeLight: '#ea4300',
    orangeLighter: '#ff8c00',
    redDark: '#a80000',
    red: '#e81123',
    magentaDark: '#5c005c',
    magenta: '#b4009e',
    magentaLight: '#e3008c',
    purpleDark: '#32145a',
    purple: '#5c2d91',
    purpleLight: '#b4a0ff',
    blueDark: '#002050',
    blueMid: '#00188f',
    blue: '#0078d4',
    blueLight: '#00bcf2',
    tealDark: '#004b50',
    teal: '#008272',
    tealLight: '#00b294',
    greenDark: '#004b1c',
    green: '#107c10',
    greenLight: '#bad80a',
};
var defaultTheme = getTheme(true);
var invertedDefaultTheme = createTheme({
    palette: invertedDefaultPalette,
    semanticColors: {
        bodyText: defaultTheme.palette.white,
        bodyBackground: defaultTheme.palette.neutralPrimary,
    },
});
var invertedPrimaryTheme = createTheme({
    palette: invertedPrimaryPalette,
    semanticColors: {
        bodyText: defaultTheme.palette.white,
        bodyBackground: defaultTheme.palette.themePrimary,
    },
});
var schemeThemeCustom = __assign(__assign({}, defaultTheme), { schemes: {
        default: defaultTheme,
        neutral: defaultTheme,
        soft: invertedPrimaryTheme,
        strong: invertedDefaultTheme,
    } });
var ThemingSchemesCustomExample = /** @class */ (function (_super) {
    __extends(ThemingSchemesCustomExample, _super);
    function ThemingSchemesCustomExample() {
        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;
    }
    ThemingSchemesCustomExample.prototype.render = function () {
        return React.createElement(Customizer, { settings: { theme: schemeThemeCustom } }, this._renderSchemedComponents());
    };
    /**
     * Render various components only using scheme names (no Customizers.)
     */
    ThemingSchemesCustomExample.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 ThemingSchemesCustomExample;
}(React.Component));
export { ThemingSchemesCustomExample };
// 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, { options: [
                        { key: 'A', text: 'Option A' },
                        { key: 'B', text: 'Option B', checked: true },
                        { 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.Custom.Example.js.map