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 { mergeThemes } from '@fluentui/theme';
import { Stack, Text, ColorPicker } from 'office-ui-fabric-react';
var paletteAccent = 'var(--palette-accent)';
var paletteSoftest = 'var(--palette-softest)';
var paletteStrongest = 'var(--palette-strongest)';
var getThemes = function (accent) {
    var lightTheme = mergeThemes({
        tokens: {
            palette: {
                accent: accent,
                softest: 'white',
                strongest: 'black',
            },
            body: {
                background: 'white',
                contentColor: 'black',
            },
            accent: {
                background: paletteAccent,
                contentColor: paletteSoftest,
                hovered: {
                    background: paletteAccent,
                    contentColor: paletteSoftest,
                },
                pressed: {
                    background: paletteAccent,
                    contentColor: paletteSoftest,
                },
            },
            button: {
                background: '#ddd',
            },
        },
        stylesheets: [],
    });
    var darkTheme = mergeThemes(lightTheme, {
        tokens: {
            palette: {
                softest: 'black',
                strongest: 'white',
            },
            body: {
                background: '#333',
                contentColor: paletteStrongest,
            },
            button: {
                background: 'transparent',
                contentColor: paletteStrongest,
                hovered: {
                    background: '#555',
                    contentColor: paletteStrongest,
                },
            },
            accent: {
                background: 'blue',
                contentColor: paletteStrongest,
                hovered: {
                    background: '#555',
                    contentColor: paletteStrongest,
                },
            },
        },
    });
    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" }, "Accent 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