import * as React from 'react';
import { Button } from '@fluentui/react-button';
import { UploadIcon } from '@fluentui/react-icons';
import { ThemeProvider } from '@fluentui/react-theme-provider';
import { Stack, Text, ColorPicker } from 'office-ui-fabric-react';
var getThemes = function (brand) {
    var lightTheme = {
        tokens: {
            color: {
                body: {
                    background: 'white',
                    contentColor: 'black',
                },
                brand: {
                    background: brand,
                    hovered: {
                        background: brand,
                    },
                    pressed: {
                        background: brand,
                    },
                },
            },
        },
    };
    var darkTheme = {
        tokens: {
            color: {
                body: {
                    background: '#333',
                    contentColor: 'white',
                },
                brand: {
                    background: brand,
                    hovered: {
                        background: '#555',
                    },
                    pressed: {
                        background: '#555',
                    },
                },
            },
        },
    };
    return { lightTheme: lightTheme, darkTheme: darkTheme };
};
var ExampleBox = function (_a) {
    var title = _a.title, theme = _a.theme;
    return (React.createElement(ThemeProvider, { theme: theme, style: { padding: 20 } },
        React.createElement(Stack, { tokens: {
                childrenGap: 8,
                maxWidth: 400,
            } },
            React.createElement(Text, { variant: "xLarge" }, title),
            React.createElement(Button, { icon: React.createElement(UploadIcon, null) }, "I am a button"),
            React.createElement(Button, { primary: true }, "I am a primary button"))));
};
export var ThemeExample = function () {
    var _a = React.useState('#f00'), color = _a[0], setColor = _a[1];
    var _b = getThemes(color), lightTheme = _b.lightTheme, darkTheme = _b.darkTheme;
    var onColorChange = React.useCallback(function (ev, newColor) { return setColor(newColor.str); }, []);
    return (React.createElement(Stack, { gap: 16 },
        React.createElement(Text, { variant: "xLarge" }, "brand color"),
        React.createElement(ColorPicker, { color: color, onChange: onColorChange }),
        React.createElement(ExampleBox, { title: "Light", theme: lightTheme }),
        React.createElement(ExampleBox, { title: "Dark", theme: darkTheme })));
};
//# sourceMappingURL=Converged.stories.js.map