// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { createContext, useContext, useMemo } from 'react';
import { ThemeProvider, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';
import { lightTheme } from './themes';
const wrapper = mergeStyles({
    height: '100%',
    width: '100%',
    // Add NorthStar styling used previously in the library
    '*': {
        boxSizing: 'border-box'
    },
    '*:before': {
        boxSizing: 'border-box'
    },
    '*:after': {
        boxSizing: 'border-box'
    },
    /* Adding priority for HTML `hidden` attribute to be applied correctly */
    '[hidden]': {
        display: 'none!important'
    }
});
const defaultTheme = Object.assign({}, mergeThemes(getTheme(), lightTheme));
/** Theme context for library's react components */
const ThemeContext = createContext(defaultTheme);
/**
 * Provider to apply a Fluent theme across this library's react components.
 *
 * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/fluentui#/controls/web),
 * controls, mixing v8 and v9 controls.
 * This provider handles applying any theme provided to the underlying Fluent UI controls. *
 * @public
 */
export const FluentThemeProvider = (props) => {
    const { fluentTheme, rtl, children, rootStyle } = props;
    const fluentV8Theme = useMemo(() => {
        const mergedTheme = mergeThemes(defaultTheme, fluentTheme);
        return mergeThemes(mergedTheme, {
            rtl
        });
    }, [fluentTheme, rtl]);
    return React.createElement(ThemeContext.Provider, { value: fluentV8Theme },
        React.createElement(ThemeProvider, { theme: fluentV8Theme, className: wrapper, style: rootStyle }, children));
};
/**
 * React hook to access theme
 *
 * @public
 */
export const useTheme = () => useContext(ThemeContext);
//# sourceMappingURL=FluentThemeProvider.js.map