import { __extends } from "tslib";
import * as React from 'react';
import { Customizer as DeprecatedCustomizer } from '@fluentui/react/lib/Utilities';
import { createTheme, DefaultPalette } from '@fluentui/react/lib/Styling';
import { FocusZone } from '@fluentui/react/lib/FocusZone';
import { CollapsibleSection, CollapsibleSectionStateless, } from '@fluentui/react-experiments/lib/CollapsibleSection';
// Workaround to prevent errors on usage of Customizer in this file, without disabling all deprecation checks
// eslint-disable-next-line deprecation/deprecation
var Customizer = DeprecatedCustomizer;
var getPropStyles = function (props, theme) { return ({
    root: [
        {
            background: theme.semanticColors.inputBackground,
        },
    ],
    body: [
        theme.fonts.small,
        {
            background: theme.semanticColors.disabledBackground,
        },
    ],
}); };
var getCustomizerStyles = function (props, theme) { return ({
    body: [
        {
            color: theme.semanticColors.link,
        },
    ],
}); };
var getPropTitleStyles = function (props, theme) { return ({
    text: [theme.fonts.large],
}); };
var getCustomizerTitleStyles = function (props, theme) { return ({
    chevron: { color: theme.semanticColors.link },
    text: { color: theme.semanticColors.link },
}); };
var csCustomizerTheme = createTheme({
    semanticColors: {
        disabledBackground: DefaultPalette.themeLight,
        inputBackground: DefaultPalette.themeLighter,
    },
});
var csPropTheme = createTheme({
    semanticColors: {
        disabledBackground: DefaultPalette.themeDarker,
        inputBackground: DefaultPalette.themeDark,
    },
});
var CollapsibleSectionStyledExample = /** @class */ (function (_super) {
    __extends(CollapsibleSectionStyledExample, _super);
    function CollapsibleSectionStyledExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CollapsibleSectionStyledExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement("p", null, "This is a demonstration of the various levels of theming and styling that have effect on created components, with and without state. Themes and styles should have priority based on how locally they are defined: individual props as highest priority followed by contextual (Customizer) and finally global."),
            React.createElement("p", null, "If everything is working correctly color gradients should gradually get darker within each type of component with any variant having Theme prop looking identical."),
            React.createElement("p", null,
                React.createElement("b", null, "Stateful Components")),
            React.createElement(FocusZone, null,
                React.createElement(CollapsibleSection, { key: 1, defaultCollapsed: false, title: "No Styling" }, "Body"),
                React.createElement("br", null),
                React.createElement(CollapsibleSection, { key: 2, defaultCollapsed: false, title: {
                        text: 'Prop Styles',
                        styles: getPropTitleStyles,
                    }, styles: getPropStyles }, "Body"),
                React.createElement("br", null),
                React.createElement(Customizer, { scopedSettings: {
                        CollapsibleSection: { styles: getCustomizerStyles },
                        CollapsibleSectionTitle: { styles: getCustomizerTitleStyles },
                    } },
                    React.createElement(CollapsibleSection, { key: 3, defaultCollapsed: false, title: {
                            text: 'Prop Styles + Customizer Styles',
                            styles: getPropTitleStyles,
                        }, styles: getPropStyles }, "Body")),
                React.createElement("br", null),
                React.createElement(Customizer, { settings: { theme: csCustomizerTheme } },
                    React.createElement(CollapsibleSection, { key: 4, defaultCollapsed: false, title: {
                            text: 'Prop Styles + Customizer Theme',
                            styles: getPropTitleStyles,
                        }, styles: getPropStyles }, "Body")),
                React.createElement("br", null),
                React.createElement(CollapsibleSection, { key: 5, defaultCollapsed: false, title: {
                        text: 'Prop Styles + Prop Theme',
                        styles: getPropTitleStyles,
                    }, styles: getPropStyles, theme: csPropTheme }, "Body"),
                React.createElement("br", null),
                React.createElement(Customizer, { settings: { theme: csCustomizerTheme } },
                    React.createElement(CollapsibleSection, { key: 6, defaultCollapsed: false, title: {
                            text: 'Prop Styles + Customizer Theme + Prop Theme',
                            styles: getPropTitleStyles,
                        }, styles: getPropStyles, theme: csPropTheme }, "Body")),
                React.createElement("p", null,
                    React.createElement("b", null, "Stateless Components")),
                React.createElement(CollapsibleSectionStateless, { key: 7, collapsed: false, title: "No Styling" }, "Body"),
                React.createElement("br", null),
                React.createElement(CollapsibleSectionStateless, { key: 8, collapsed: false, title: {
                        text: 'Prop Styles',
                        styles: getPropTitleStyles,
                    }, styles: getPropStyles }, "Body"),
                React.createElement("br", null),
                React.createElement(Customizer, { scopedSettings: {
                        CollapsibleSection: { styles: getCustomizerStyles },
                        CollapsibleSectionTitle: { styles: getCustomizerTitleStyles },
                    } },
                    React.createElement(CollapsibleSectionStateless, { key: 9, collapsed: false, title: {
                            text: 'Prop Styles + Customizer Styles',
                            styles: getPropTitleStyles,
                        }, styles: getPropStyles }, "Body")),
                React.createElement("br", null),
                React.createElement(Customizer, { settings: { theme: csCustomizerTheme } },
                    React.createElement(CollapsibleSectionStateless, { key: 10, collapsed: false, title: {
                            text: 'Prop Styles + Customizer Theme',
                            styles: getPropTitleStyles,
                        }, styles: getPropStyles }, "Body")),
                React.createElement("br", null),
                React.createElement(CollapsibleSectionStateless, { key: 11, collapsed: false, title: {
                        text: 'Prop Styles + Prop Theme',
                        styles: getPropTitleStyles,
                    }, styles: getPropStyles, theme: csPropTheme }, "Body"),
                React.createElement("br", null),
                React.createElement(Customizer, { settings: { theme: csCustomizerTheme } },
                    React.createElement(CollapsibleSectionStateless, { key: 12, collapsed: false, title: {
                            text: 'Prop Styles + Customizer Theme + Prop Theme',
                            styles: getPropTitleStyles,
                        }, styles: getPropStyles, theme: csPropTheme }, "Body")))));
    };
    return CollapsibleSectionStyledExample;
}(React.Component));
export { CollapsibleSectionStyledExample };
//# sourceMappingURL=CollapsibleSection.Styled.Example.js.map